Question

我遇到了这个问题，如果我在同一个容器上的toggleClass使用不同的链接试图显示不同的内容，它不会立即在任何第二个链接上显示容器。基本上它会关闭容器，然后我必须再次单击链接以显示内容。我试图使用相同的容器和toggleClass实现选项卡效果，不幸的是我无法弄清楚如何在第二个链接上立即显示容器。我很感激任何建议。

以下是一个实例http://jsbin.com/eyEnEvEC/1/

和整个代码。

CSS

.container {
  display:none;
}


.show {
  display:block;
}

HTML

<a href="" id="link1">Link 1</a>
<a href="" id="link2">Link 2</a> 
<div class="container"></div>

的Javascript

$(function(){

  $('#link1').click(function(){    
    $('.container').html('Test 1');
    $('.container').toggleClass('show');
        return false;
  });

  $('#link2').click(function(){    
    $('.container').html('Test 2');
    $('.container').toggleClass('show');
        return false;
  });

});

Answer 1

试试这个

<强> HTML

<a href="" id="link1" data-status="inactive">Link 1</a>
<a href="" id="link2" data-status="inactive">Link 2</a>

<强> JQuery的

$(function(){
  $.fn.toggleContent = function(ahtml) {
    var cstatus =  $(this).attr("data-status");
    $("a[id^=link]").attr("data-status","inactive");
    if(cstatus == "inactive") {
      $('.container').html(ahtml).show(); 
      $(this).attr("data-status","active");
    }
    else {
      $('.container').html(ahtml).hide();  
      $(this).attr("data-status","inactive");
    }
    return false;
  };

  $('#link1').click(function(){    
    $(this).toggleContent('Test 1');    

  });

  $('#link2').click(function(){    
    $(this).toggleContent('Test 2'); 
  });

});

演示：http://jsbin.com/eyEnEvEC/9/edit

toggleClass在同一个容器上，并显示带有制表符效果的不同内容

1 个答案: