5

メインメニューに動的アクティブクラスを追加しようとしていますが、これを実現できません。

私のjqueryは、

<script type="text/javascript">
$(document).ready(function() {
  $('#navi a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active');
});
</script>

私のメインメニューは、 

<ul id="navi">
  <li><a href="#">About MHG</a></li>
  <li><a href="#">Workout Programs</a></li>
  <li><a href="#">Fitness Tips</a></li>
  <li><a href="#">Contact Us</a></li>          
  <li><a href="#">Read Our Blog</a></li>
</ul>
4

4 に答える 4

19

これを試して

<ul id="navi">
    <li><a class="menu" href="#">About MHG</a></li>
    <li><a class="menu" href="#">Workout Programs</a></li>
    <li><a class="menu" href="#">Fitness Tips</a></li>
    <li><a class="menu" href="#">Contact Us</a></li>          
    <li><a class="menu" href="#">Read Our Blog</a></li>
  </ul>

jquery

$('a.menu').click(function(){
    $('a.menu').removeClass("active");
    $(this).addClass("active");
});

このフィドルをチェックしてくださいhttp://jsfiddle.net/9nd4j/1/

于 2013-01-30T16:05:38.797 に答える
1

^^ 上記の Rory のコメントと同じです!!

、それでも必要な場合は実行できます

$("#navi a").live("click", function(){
  $("#navi a").removeClass("active");
  $(this).addClass("active")
});

上記の同じページを指すすべてのリンクがある場合、ソリューションが機能します。あるページから別のページにトラバースしようとしていることがわかりますが、これは機能しません。

ありがとう

于 2013-01-30T15:31:46.397 に答える
0

あなたの説明はあまり明確ではありません。ホバリングしているリストアイテムを意味する場合、アクティブとは、次のようなものでなければなりません。

$('a.menu').hover(

function () {
    $(this).addClass("active");
},

function () {
    $('a.menu').removeClass("active");
});
于 2013-01-30T16:32:56.457 に答える