2013-04-15 2 views
0

У меня есть код javascript внутри моего HTML. Вот код:Javascript внутри HTML не работает для отображения определенного div

<body> 
<div id="div_inner_title"> 
    <img class="img_title" src="../common/img/header_logo.png"></img> 
    <a id="menuId"><img class="img_menu" src="img/btn_menu.png"></img></a>      
    <script type='text/javascript'> 
    $(document).ready(function(){ 
     $("#menuId").click(function(){ 
     $('html, body').animate({ 
      scrollTop: $("#div_menu_links").offset().top 
     }, 1000); 
     }); 
});</script> 
</div> 
. 
. 
. 
. 
.<!--Somewhere really below is a menu--> 
. 
. 
<div class="div_menu_links"> 
    <a href="...."> 
     <img src="../common/img/menu_01.png" class="img_menu_button"></img> 
    </a> 
    <img class="img_menu_line_button" src="../common/img/menu_line.gif"></img> 
<a href="...."> 
     <img src="../common/img/menu_02.png" class="img_menu_button"></img> 
    </a> 
<img class="img_menu_line_button" src="../common/img/menu_line.gif" ></img> 
<a href="...."> 
     <img src="../common/img/menu_03.png" class="img_menu_button"></img> 
    </a> 
<img class="img_menu_line_button" src="../common/img/menu_line.gif"></img> 
<a href="...."> 
     <img src="../common/img/menu_04.png"class="img_menu_button"></img> 
    </a>   
</div> 
</body> 

То, что я действительно хотел сделать, когда пользователь нажимает на кнопку изображения с помощью JavaScript, меню DIV отображается на экране (так как он находится вниз в самом веб-сайте). Однако приведенный выше код не работает. Для дополнительной информации «передача» с кнопки изображения в меню «div» имеет анимированный эффект.

Если честно, я не программист на гениальности, поэтому, пожалуйста, помогите мне. Это единственное, что не осталось на моей странице. Благодаря!

+0

Какой браузер вы используете? Можете ли вы, в консоли JS, вызвать этот код 'console.log ($ (" # div_menu_links "). Offset())' и сказать мне, что такое вывод? – Karol

+0

Также вы можете проверить JS-консоль на наличие ошибок? – Karol

+0

Добавили ли вы библиотеку 'jQuery'? –

ответ

1

Проверьте этот простой пример и попытаться достичь того же:

http://jsfiddle.net/kxGRN/2/

HTML

<a href="#" id="menuId">Go Down</a> 

<div id="div_menu_links"> 
    Reached the bottom menu! :) 
</div> 

CSS

// Just for demonstration 
#div_menu_links { margin-top:2000px;} 

Jquery

$(document).ready(function(){ 
    $("#menuId").on("click", function (e){ 
     e.preventDefault(); 
     $('html, body').animate({ 
      scrollTop: $("#div_menu_links").offset().top 
     }, 1000); 
    }); 
}); 

ПРИМЕЧАНИЕ

Не полагаться на других, чтобы обнаружить ошибки. Начните учиться, как использовать firebug, с помощью этого простого руководства: Firebug Tutorial

+0

Большое вам спасибо. Именно так я хочу, чтобы это выглядело. Я отредактировал части id из класса, и все равно он не будет работать с моими кодами. – kireirina

+0

Вы тоже заменили часть javascript? У вас есть другой код javascript внутри страницы? –

+0

Да, я тоже пробовал редактировать JS. Тем не менее, код не работает. И да, у меня есть другие JS-коды внутри страницы. Это единственный, который находится внутри тела, остальные находятся на заголовке. – kireirina