微信开发之js实现tabs选项卡效果

1. 选项卡介绍

选项卡（tabs）是网站和应用程序中常见的一种页面布局方式，其可以在一个页面内切换不同的内容。比如，网页中的菜单标签页、新闻分类标签页等。本文将介绍如何使用JavaScript来实现一个简单的选项卡效果。

2. HTML结构

首先，我们需要创建HTML结构。通常的选项卡布局是一个包含多个标签页的容器，每个标签页中包含对应的内容。以下是一个简单的HTML结构，其中包含两个标签页。

<div class="tabs">

  <ul class="tabs-nav">
    <li class="active"><a href="#">Tab 1</a></li>
    <li><a href="#">Tab 2</a></li>
  </ul>
  <div class="tabs-content">
    <div class="tab-pane active">
      <p>Content 1</p>
    </div>
    <div class="tab-pane">
      <p>Content 2</p>
    </div>
  </div>
</div>

以上代码中，<ul class="tabs-nav">用于显示标签页标题，<li class="active">表示当前标签页的状态，<a href="#">链接到对应选项卡的内容。<div class="tabs-content">是包含所有选项卡内容的容器，<div class="tab-pane">表示对应的选项卡内容，<p>标签中的内容即为选项卡要显示的内容。

3. CSS样式

接下来，我们需要设置CSS样式来使选项卡界面更美观。以下是一个简单的CSS样式示例，如果需要，可以根据自己的需要进行样式修改。

/*选项卡标题栏样式*/

.tabs-nav {
  margin: 0;
  padding: 0;
  list-style-type: none;
  background-color: #f5f5f5;
  border-bottom: 1px solid #ccc;
}
.tabs-nav li {
  display: inline-block;
  margin-right: 10px;
  border: 1px solid #ccc;
  border-bottom: none;
  background-color: #fff;
}
.tabs-nav li.active {
  background-color: #fff;
  border-color: #ccc;
}
.tabs-nav li a {
  display: block;
  padding: 10px 15px;
  color: #333;
  text-decoration: none;
  font-weight: bold;
}
.tabs-nav li:hover, .tabs-nav li.active:hover {
  background-color: #f5f5f5;
}
/*选项卡内容样式*/
.tabs-content .tab-pane {
  display: none;
  padding: 20px;
  border: 1px solid #ccc;
  border-top: none;
}
.tabs-content .tab-pane.active {
  display: block;
}

4. JavaScript实现

4.1 获取元素

首先，我们需要获取选项卡各个元素的DOM对象。可以使用以下代码：

//获取元素

var tabs = document.querySelector('.tabs');
var tabsNav = tabs.querySelector('.tabs-nav');
var tabsNavItems = tabsNav.querySelectorAll('li');
var tabsContent = tabs.querySelector('.tabs-content');
var tabsContentItems = tabsContent.querySelectorAll('.tab-pane');

以上代码中，document.querySelector()函数是用于获取class为tabs的<div>元素。querySelector()函数是用于查找选择器字符串匹配的第一个元素，querySelectorAll()函数则是查找选择器字符串匹配的所有元素，保存在一个NodeList对象中。这样，我们就获取了选项卡中的所有重要DOM元素。

4.2 选项卡切换

实现选项卡切换，需要我们定义一个函数。在该函数中，我们需要改变选项卡标题栏和选项卡内容的显示状态。可以使用以下代码实现。

//切换选项卡

function switchTab(index){
  //改变选项卡标题栏状态
  for (var i = 0; i < tabsNavItems.length; i++) {
    tabsNavItems[i].classList.remove('active');
  }
  tabsNavItems[index].classList.add('active');
  //改变选项卡内容状态
  for (var i = 0; i < tabsContentItems.length; i++) {
    tabsContentItems[i].classList.remove('active');
  }
  tabsContentItems[index].classList.add('active');
}
//初始化显示第一个选项卡
switchTab(0);

以上代码中，switchTab()函数用于切换选项卡。该函数需要传入一个参数index，表示要切换的选项卡的索引号。该函数会遍历所有选项卡，将所有选项卡标题栏和选项卡内容的状态改为未激活状态。然后，将指定选项卡的状态改为激活状态。最后，调用该函数初始化第一个选项卡的状态。

4.3 点击事件监听

为了实现选项卡切换，我们需要监听选项卡标题栏的点击事件，并在点击事件触发时切换选项卡。可以使用以下代码。

//点击事件监听

tabsNav.addEventListener('click', function(event){
  event.preventDefault();
  var clickedTab = event.target.closest('li');
  if (!clickedTab || clickedTab.classList.contains('active')) {
    return;
  }
  var clickedTabIndex = Array.prototype.indexOf.call(tabsNavItems, clickedTab);
  switchTab(clickedTabIndex);
});

以上代码中，addEventListener()函数用于监听选项卡标题栏的点击事件。当点击选项卡标题栏时，event.target会返回鼠标所点击的元素，closest()函数用于查找该元素的最近祖先元素，其中可以包含选择器字符串。这样，clickedTab就是被点击的选项卡标题栏的<li>元素。

接着，我们需要判断clickedTab是否存在，以及是否已经处于激活状态。如果是，则直接返回，不进行操作。否则，获取被点击选项卡的索引号，调用switchTab()函数切换选项卡。

5. 小结

至此，我们已经实现了一个简单的选项卡效果。以上代码可以继续优化，例如添加一些过渡效果，或者使用动画来渐变切换选项卡等。希望本文对您有所帮助。