javascript - 在同一容器上切换类并显示具有选项卡效果的不同内容

Question

我遇到了这个问题，如果我使用不同的链接在同一个容器上切换类，试图显示不同的内容，它不会立即在任何第二个链接上显示容器。基本上它会关闭容器，然后我必须再次单击链接才能显示内容。我正在尝试使用相同的容器和 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