4

こんにちは私はul liその表示カテゴリ名をフォローしています：

<ul>
<li class="selected" data-tab-id="0"></li>
<li data-tab-id="12">...</li>
<li data-tab-id="3">...</li>
<li data-tab-id="15">...</li>
<li data-tab-id="7">...</li>
</ul>

次のようなjavascriptスクリプト：

<script type="text/javascript">
var cat_id = '<?=$this->catid?>'

$(document).ready(function () {

});
</script>

現在、インデックスにあるページなので、最初li data-tab-id="0"に選択されたクラスもvar cat_id何も返されません。data-tab-id="12"これで、ユーザーが、などの別のタブに移動するとvar cat_id、戻り値は12になります。デフォルトのliから選択したクラスを削除して、に置き換えるにはどうすればよいですかdata-tab-id="12"。ありがとう

4

3 に答える 3

2

ULのIDとして想定list–ページの周囲に複数のULがある場合の問題を回避するために、次のようにします。

$("ul#list")
    .find(".selected").removeClass("selected")
    .end()
    .find("[data-tab-id=" + cat_id + "]").addClass("selected");

もちろん、2つのjQuery呼び出しでそれを行うこともできます。

$("ul#list .selected").removeClass("selected");
$("ul#list [data-tab-id=" + cat_id + "]").addClass("selected");
于 2013-02-12T13:31:34.567 に答える
1

このサンプルを使用する

$('ul li').click(function() {
    $('ul li.selected').removeClass('selected');
    $(this).closest('li').addClass('selected');
})
于 2013-02-12T13:26:20.487 に答える
1

とを使用addClass()しremoveClass()て、クラスをそれぞれ追加および削除します。これを試して

更新しました

var cat_id = '<?=$this->catid?>';
$('li').removeClass('selected'); 
 $('li').each(function(){
   if($(this).attr('data-tab-id')==cat_id){
    $(this).addClass('selected'); 
  }
})

ループを使用せずに更新されました。

var cat_id = '<?=$this->catid?>';
$('li').removeClass('selected');
$('li[data-tab-id='+cat_id+']').addClass('selected');

ここをいじる

更新されたフィドル

于 2013-02-12T13:29:18.137 に答える