javascript - 通过单击链接显示信息

Question

在我的网页中，我有四个链接（tab1、tab2、tab3、tab4）；我想单击每个选项卡以在框或区域的同一网页中显示特定的文本信息。我应该如何使用 HTML/CSS 或可能的 jquery 或 JS 来解决这个问题？一个例子将不胜感激。谢谢

标签： javascripthtmljquerycss

Answer 1

$(function () {

  var $tab_contents = $('.tabs-content li'),
      $tab_buttons = $('.tabs li');

  $('.tabs').on('click', 'li', function (e) {
    var $current = $(e.currentTarget),
        index = $current.index();
    
    $tab_buttons.removeClass('active-tab');
    $current.addClass('active-tab');
    $tab_contents.hide().eq(index).show();
     });
});

.tabs {
  list-style: none;
}

.tabs .active-tab {
  color: black;
}

.tabs li {
  display: inline-block;
  cursor: pointer;
  color: blue;
}

.tabs-content {
  list-style: none;
}

.tabs-content li {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<ul class="tabs">
  <li>First tab</li>
  <li>Second tab</li>
  <li>Third tab</li>
  <li>Fourth tab</li>
</ul>

<ul class="tabs-content">
  <li>Content of first tab</li>
  <li>Content of second tab</li>
  <li>Content of third tab</li>
  <li>Content of fourth tab</li>
</ul>