JQuery -分隔制表符功能

Question

我试图让一个单独的标签功能在我的页面上工作，现在我没有使用JQuery或javascript的经验。所以我想让外界关注一下这段JQuery代码，看看是什么原因造成的。因为目前我在页面上的所有内容都是捆绑在一起的，而不是通过标签单独提供。

<div>
  <ul class="tabs">
    <li><a href="#tab-1">Info</a></li>
    <li><a href="#tab-2">About</a></li>
    <li><a href="#tab-3">Terms</a></li>
  </ul>
  <div id="tab-1">
  {{ dev.des }}
  </div>
  <div id="tab-2">
  {% render 'About' %}
  </div>
  <div id="tab-3">
  {{ terms.content }}
  </div>
</div>

  $(document).ready(function() {
    $('ul.tabs').each(function(){
      var active, content, links = $(this).find('a');
      active = links.first().addClass('active');
      content = $(active.attr('href'));
      links.not(':first').each(function () {
        $($(this).attr('href')).hide();
      });
      $(this).find('a').click(function(e){
        active.removeClass('active');
        content.hide();
        active = $(this);
        content = $($(this).attr('href'));
        active.addClass('active');
        content.show();
        return false;
      });
    });
  });

Answer 1

如下所示，设置页签内容的类。

<div id="tab-1" class="content">
  {{ dev.des }}
</div>

CSS as，

.content {
   display : none;
}
.content.active {
   display : block;
}

然后，在Jquery上，您可以处理click for tab，通过选择id来更改活动的类。