JQuery - 單獨的標簽 function

Question

我試圖讓一個單獨的選項卡 function 在我的頁面上工作，現在我沒有使用 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

為標簽內容設置 class，如下所示，

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

CSS 作為,

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

然后在 Jquery 上，您可以處理單擊選項卡以通過選擇 id 來更改 class 活動。