1

javascript を取得して「li」メニュー項目にアクティブなクラスを設定するのに少し問題があります。

メニューは以下のようにphpで構成されています。

<nav class="categoriesMenu">
<ul class="nav nav-tabs categories">
<?php
        $i=0;
            foreach($categories as $k=>$v){
            $space = array(" ");
            $normalizedCategory = str_replace($space, "", $k);
            echo "<li id='id$normalizedCategory'>";
                 if($i==0){
                    echo "<a href='#'>$k</a>";
                 }else{
                    echo "<a href='#'>$k</a>";
                 }
                 $i++;
              echo "</li>";
           } ?>
</ul>
</nav>

そして、クリックに基づいてアクティブなクラスを設定する次のJavaScriptがありますが、「a」タグでのみ「li」にアクティブなクラスを設定することはできません

$(document).ready(function(){

var selectCategory=function(id){
        var ref=id.replace(' ','');
        var classSelector=ref.replace(' ','');
        $("nav > ul.categories > li").removeClass("active");
        $("#"+ref+" > li").addClass("active");
        $('nav > ul.subCategories > li').hide();
        $('nav > ul.subCategories > li.'+classSelector).show();
}

$('nav > ul.subCategories > li').click(function(){
               if(!$(this).children('li').hasClass("active")){
                 window[$(this).attr('title')]();
               }
               $('nav > ul.subCategories > li').removeClass("active");
               $(this).children().addClass("active")
           });

$('nav > ul.categories > li').click(function(){
            var reference=$(this).attr('id');
            selectCategory(reference);
})

var firstCat=$('nav > ul.subCategories > li:first').attr('class');
selectCategory(firstCat);

})

メニューはこの形式でレンダリングされます

 <div class="navigation">
 <nav class="categoriesMenu">
 <ul class="nav nav-tabs categories">
 <li id='idManagement'>
      <a href='#'>Management</a>
 </li>
 <li id='idReports'>
      <a href='#'>Reports</a>
 </li>
 <li id='idUsers'>
      <a href='#'>Users</a>
 </li>
 <li id='idAdministration'>
     <a href='#'>Administration</a>
 </li>
 </ul>
</nav>

 <nav class="subCategoriesMenu">
 <ul class="nav nav-pills subCategories">
 <li class='idManagement' id='idManagementRequests' title='RequestsInterface'>
      <a>Requests</a>
 </li>
 <li class='idManagement' id='idManagementTeamActivity' title='ActivityInterface'>
 <a>Team Activity</a>
 </li>
 </ul>
 </nav>

どんな助けでも大歓迎です。ありがとうございました

4

1 に答える 1

0

私はあなたが欲しいと思います：

var selectCategory=function(id){
    var ref=id.replace(' ','');
    var classSelector=ref.replace(' ','');
    $("nav > ul.categories > li").removeClass("active");
    $("#"+ref).addClass("active");
    $('nav > ul.subCategories > li').hide();
    $('nav > ul.subCategories > li.'+classSelector).show();
}
$('ul.subCategories li').click(function(){
    /*if(!$(this).hasClass("active")){
        window[$(this).attr('title')]();
    }*/
    $('nav > ul.subCategories > li').removeClass("active");
    $(this).addClass("active");
});

$('nav > ul.categories > li').click(function(
    var reference=$(this).attr('id');
    selectCategory(reference);
});

var firstCat=$('nav > ul.subCategories > li:first').attr('class');
selectCategory(firstCat);

このフィドルはあなたが望むことをしますか？http://jsfiddle.net/nzjhK/32

于 2013-01-14T21:51:52.760 に答える