0

私は、liタグのクラスに応じて、ボタンを非表示および表示する次のJqueryスクリプトを持っています

$('li#test').each(function() {
        if($(this).hasClass('active'))
        {
            //Active class is applied
            $(this).children().children().closest("img").attr("src", "assets/img/button_home_selected3.png");
            $(this).children().children().closest("button").css("display","table");
        }
        else
        {
            $(this).children().children().closest("img").attr("src", "assets/img/button_home_plain1.png");
            $(this).children().children().closest("button").css("display","none");
        }
    });

デフォルトでは、ボタン タグには display:none があります。

htmlは次のとおりです。

<ul id="nav-tabs" data-tabs="tabs">
  <li id="test" style="list-style: none;" class="active">
   <a href="#home" data-toggle="tabs" ><img src="assets/img/button_home_selected3.png" id="test2"  width="83"/><span>Home</span></a>
  </li>
</ul>

li タグは、スクリプトを使用して動的に追加されます

$('.plus').click(function(e) {
 e.preventDefault();
 var li_count = $('#nav-tabs').length;
 if (li_count <= 3){
  if(counter <= 3){
   $('#nav-tabs').append('<li id="test" ><a href="#tab' + counter + '" data-toggle="tabs" ><img src="assets/img/button_home_plain1.png" width="83" id="test2">Tab' + counter + '</span><button type="button" class="close">&times;</button></a></li>');
} else { alert("Only 3 Tabs Allowed!")};
}

また、スクリプトを使用してタブを切り替えるアクティブなタグが 1 つあります。

$('li#test').each(function() {
if($(this).hasClass('active'))
 {//Active class is applied
  $(this).children().children().attr("src", "assets/img/button_home_selected3.png");
 }
 else
 {
  $(this).children().children().attr("src", "assets/img/button_home_plain.png");
 }

});

これは IE と Firefox では正常に機能しますが、Google Chrome では機能しません...

4

2 に答える 2

0

ボタンタグがdivまたはspanタグ内になかったため、Chromeで操作を実行していなかったため、Google Chromeはdivおよびspan以外のタグで非表示および表示を行わないようです。 ..

于 2013-02-15T09:04:58.857 に答える
0

コードにはいくつかの問題があります。

  1. ID は一意である必要があります。したがって、HTML を次のように変更します。

    <ul id="nav-tabs" data-tabs="tabs">
  <li class="test active" style="list-style: none;">
   <a href="#home" data-toggle="tabs" >
    <img src="assets/img/button_home_selected3.png" class="test2" width="83"/> 
    <span>Home</span>
   </a>
  </li>
</ul>

    JavaScript：

    $('li.test').each(function() {
  if($(this).hasClass('active'))
  {
    //Active class is applied
    $(this).find("img").attr("src", "assets/img/button_home_selected3.png");
    $(this).find("button").show();
  }
  else
  {
    $(this).find("img").attr("src", "assets/img/button_home_plain1.png");
    $(this).find("button").hide();
  }
});

  2. liではなく、 の長さを取得しulます。

    $('.plus').click(function(e) {
  e.preventDefault();
  var li_count = $('#nav-tabs').find('li').length;
  if (li_count <= 3){
    if(counter <= 3){
      $('#nav-tabs').append('<li class="test"><a href="#tab' + counter + '" data-toggle="tabs" ><img src="assets/img/button_home_plain1.png" width="83" class="test2">Tab' + counter + '</span><button type="button" class="close">&times;</button></a></li>');
    } else {
      alert("Only 3 Tabs Allowed!")
    }
  }
});
于 2013-02-15T06:53:48.760 に答える