下面是详细的js实现选项卡的攻略，包含了具体的实现过程、代码示例和注意事项。

js实现的Easy Tabs选项卡用法实例

简介

选项卡是一种经典的交互式UI组件，主要用于在有限的屏幕空间内展示多个内容区块。js实现的Easy Tabs选项卡就是其中的一种，比起使用CSS实现，使用js实现可以更加灵活，可定制性更强。

基本原理

js实现的选项卡主要原理是，通过js代码控制HTML元素的显示与隐藏，并在选项卡标题上绑定点击事件，切换对应的内容。

实现步骤

具体实现步骤如下：

1. 创建HTML结构。

<div class="tabs-container">
  <ul class="tabs-nav">
    <li><a href="#tab1" class="active">Tab One</a></li>
    <li><a href="#tab2">Tab Two</a></li>
    <li><a href="#tab3">Tab Three</a></li>
  </ul>
  <div class="tabs-content">
    <div id="tab1" class="tab-pane active">Tab One Content</div>
    <div id="tab2" class="tab-pane">Tab Two Content</div>
    <div id="tab3" class="tab-pane">Tab Three Content</div>
  </div>
</div>

使用HTML结构来创建选项卡面板和标题部分。其中，选项卡标题部分需要使用

标签来定义，每个标题需要使用
• 标签，每个标题需要使用定义链接，在标签中使用href属性来指定与其对应的选项面板的id值。
  1. 添加CSS样式。

  .tabs-nav {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  .tabs-nav li {
    display: inline-block;
    margin-right: 10px;
  }
  
  .tabs-nav li:last-child {
    margin-right: 0;
  }
  
  .tabs-nav a {
    padding: 5px 10px;
    border: 1px solid #ccc;
    border-bottom: none;
    text-decoration: none;
    background-color: #f6f6f6;
    color: #666; 
  }
  
  .tabs-nav .active a {
    border-bottom: 1px solid white;
    background-color: white;
    color: #333; 
  }
  
  .tabs-content .tab-pane {
    display: none; 
  }
  
  .tabs-content .active {
    display: block;
  }
  

  添加CSS样式来美化选项卡面板的样式，其中：

  • tabs-nav样式用来对选项卡标题的样式进行设置，list-style:none、margin:0、padding:0操作用来去除默认样式；
  • tabs-nav li样式用来设置每个选项卡标题的样式，display:inline-block操作用来让每个选项横向展示，margin-right:10px操作用来设置每个选项的间距，最后的tabs-nav li:last-child用来去除最后一个选项距离右边框的间距；
  • tabs-nav a样式用来对选项按钮的样式进行设置，padding:5px 10px操作用来设置按钮的上下和左右间距，border:1px solid #ccc和border-bottom:none操作用来设置按钮的边框样式，text-decoration:none操作用来去除下划线，background-color:#f6f6f6操作用来设置按钮的背景色，color:#666操作用来设置字体的样式；
  • tabs-nav .active a样式用来对选中的按钮的样式进行设置，主要是将边框、背景色和字体进行了修改；
  • tabs-content .tab-pane样式用来对内容区块的样式进行设置，display:none操作用来将内容区块隐藏；

  • tabs-content .active样式用来对当前选项卡展示的内容区块进行设置，display:block操作用来进行显示。

  • 编写JS代码

  var tabLinks = document.querySelectorAll(".tabs-nav a");
  var tabPanes = document.querySelectorAll(".tabs-content .tab-pane");
  
  for (var i = 0; i < tabLinks.length; i++) {
    var link = tabLinks[i];
    link.addEventListener("click", function(e) {
      e.preventDefault();
      var id = this.getAttribute("href").substring(1);
      for (var j = 0; j < tabPanes.length; j++) {
        var pane = tabPanes[j];
        if (pane.id === id) {
          pane.classList.add("active");
        } else {
          pane.classList.remove("active");
        }
      }
      for (var k = 0; k < tabLinks.length; k++) {
        var link = tabLinks[k];
        link.classList.remove("active");
      }
      this.classList.add("active");
    });
  }
  
  tabLinks[0].click();
  

  使用纯Javascript代码，在选项卡标题上绑定点击事件，点击时通过关联href属性值来确定需要显示的选项卡内容。

  在代码中，首先获取选项卡上的链接和内容区块，然后对每个链接添加一个点击事件监听器，当用户单击链接时，通过获取该链接的href属性来找到对应的内容区块，在遍历所有内容区块的循环中，判断当前的内容区块是否与被点击的链接所关联的内容区块相同，如果是，则将该内容区块设置为“active”，否则移除其“active”样式。

  最后，还需要为选项卡标题和内容区块设置一个初始的活动状态。

  示例说明

  在以上的基础上，我们可以添加几个简单的示例，让大家更进一步了解js实现的Easy Tabs选项卡用法。

  示例1：基本选项卡

  <div class="tabs-container">
    <ul class="tabs-nav">
      <li><a href="#tab1" class="active">Tab One</a></li>
      <li><a href="#tab2">Tab Two</a></li>
      <li><a href="#tab3">Tab Three</a></li>
    </ul>
    <div class="tabs-content">
      <div id="tab1" class="tab-pane active">Tab One Content</div>
      <div id="tab2" class="tab-pane">Tab Two Content</div>
      <div id="tab3" class="tab-pane">Tab Three Content</div>
    </div>
  </div>
  
  <script>
    var tabLinks = document.querySelectorAll(".tabs-nav a");
    var tabPanes = document.querySelectorAll(".tabs-content .tab-pane");
  
    for (var i = 0; i < tabLinks.length; i++) {
      var link = tabLinks[i];
      link.addEventListener("click", function(e) {
        e.preventDefault();
        var id = this.getAttribute("href").substring(1);
        for (var j = 0; j < tabPanes.length; j++) {
          var pane = tabPanes[j];
          if (pane.id === id) {
            pane.classList.add("active");
          } else {
            pane.classList.remove("active");
          }
        }
        for (var k = 0; k < tabLinks.length; k++) {
          var link = tabLinks[k];
          link.classList.remove("active");
        }
        this.classList.add("active");
      });
    }
  
    tabLinks[0].click();
  </script>
  

  可以看到，这是一个基本的选项卡示例。每个选项卡的标签用标签定义，标签页内容用

  标签定义。 点击不同选项卡标签可以切换标签页内容。

  示例2：嵌套选项卡

  <div class="tabs-container">
    <ul class="tabs-nav">
      <li><a href="#tab1" class="active">Tab One</a></li>
      <li><a href="#tab2">Tab Two</a></li>
      <li><a href="#tab3">Tab Three</a></li>
    </ul>
    <div class="tabs-content">
      <div id="tab1" class="tab-pane active">
        <div class="sub-tabs-container">
          <ul class="sub-tabs-nav">
            <li><a href="#sub-tab1" class="active">Sub Tab One</a></li>
            <li><a href="#sub-tab2">Sub Tab Two</a></li>
            <li><a href="#sub-tab3">Sub Tab Three</a></li>
          </ul>
          <div class="sub-tabs-content">
            <div id="sub-tab1" class="tab-pane active">Sub Tab One Content</div>
            <div id="sub-tab2" class="tab-pane">Sub Tab Two Content</div>
            <div id="sub-tab3" class="tab-pane">Sub Tab Three Content</div>
          </div>
        </div>
      </div>
      <div id="tab2" class="tab-pane">Tab Two Content</div>
      <div id="tab3" class="tab-pane">Tab Three Content</div>
    </div>
  </div>
  
  <script>
    var tabLinks = document.querySelectorAll(".tabs-nav a");
    var subTabLinks = document.querySelectorAll(".sub-tabs-nav a");
    var tabPanes = document.querySelectorAll(".tabs-content .tab-pane");
    var subTabPanes = document.querySelectorAll(".sub-tabs-content .tab-pane");
  
    for (var i = 0; i < tabLinks.length; i++) {
      var link = tabLinks[i];
      link.addEventListener("click", function(e) {
        e.preventDefault();
        var id = this.getAttribute("href").substring(1);
        for (var j = 0; j < tabPanes.length; j++) {
          var pane = tabPanes[j];
          if (pane.id === id) {
            pane.classList.add("active");
          } else {
            pane.classList.remove("active");
          }
        }
        for (var k = 0; k < tabLinks.length; k++) {
          var link = tabLinks[k];
          link.classList.remove("active");
        }
        this.classList.add("active");
      });
    }
  
    for (var n = 0; n < subTabLinks.length; n++) {
      var link = subTabLinks[n];
      link.addEventListener("click", function(e) {
        e.preventDefault();
        var id = this.getAttribute("href").substring(1);
        for (var m = 0; m < subTabPanes.length; m++) {
          var pane = subTabPanes[m];
          if (pane.id === id) {
            pane.classList.add("active");
          } else {
            pane.classList.remove("active");
          }
        }
        for (var o = 0; o < subTabLinks.length; o++) {
          var link = subTabLinks[o];
          link.classList.remove("active");
        }
        this.classList.add("active");
      });
    }
  
    tabLinks[0].click();
    subTabLinks[0].click();
  </script>
  

  这是一个嵌套的选项卡示例，子选项卡中同样用了选项卡的方式实现内容切换。点击以上示例中不同的选项卡标签页可以切换标签页内容，子选项卡同理。
  cssweb
  赞 (0)
  0 0 打赏 微信扫一扫 支付宝扫一扫

  生成海报