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选项卡，通过选择id来更改活动的类。

jQuery-单独的标签功能

1 个答案: