js tab栏切换

可以使用jQuery来实现一个简单的tab栏切换。下面是一个示例代码：

HTML：

<div class="tab-wrapper">
  <ul class="tab-nav">
    <li><a href="#tab1">Tab 1</a></li>
    <li><a href="#tab2">Tab 2</a></li>
    <li><a href="#tab3">Tab 3</a></li>
  </ul>
  <div class="tab-content">
    <div id="tab1" class="tab-pane">Tab 1 Content</div>
    <div id="tab2" class="tab-pane">Tab 2 Content</div>
    <div id="tab3" class="tab-pane">Tab 3 Content</div>
  </div>
</div>

CSS：

.tab-nav li {
  display: inline-block;
  margin-right: 10px;
}
.tab-nav li a {
  display: block;
  padding: 5px;
  background-color: #eee;
  border: 1px solid #ccc;
  text-decoration: none;
  color: #333;
}
.tab-nav li.active a {
  background-color: #fff;
  border-bottom-color: transparent;
}
.tab-content .tab-pane {
  display: none;
}
.tab-content .active {
  display: block;
}

JavaScript：

$(document).ready(function() {
  $('.tab-nav li:first-child').addClass('active');
  $('.tab-content .tab-pane:first-child').addClass('active');
  $('.tab-nav li a').click(function() {
    var tab_id = $(this).attr('href');
    $('.tab-nav li').removeClass('active');
    $('.tab-content .tab-pane').removeClass('active');
    $(this).parent().addClass('active');
    $(tab_id).addClass('active');
    return false;
  });
});

首先，给每个tab页一个唯一的id，然后使用CSS来设置样式。JavaScript代码中，我们给第一个tab页和tab导航栏的第一个选项添加active类。然后，当点击tab导航栏的某一项时，我们首先移除所有的active类，然后给被点击的导航栏项和对应的tab页添加active类。最后，返回false以阻止默认链接行为。