85自定义切换标签页代码实现

<ul class='\"nav' nav-tabs\"="">

  <li class='\"active\"'><a data-toggle='\"tab\"' href='\"#tab1\"'>Tab 1a>li>

  <li><a data-toggle='\"tab\"' href='\"#tab2\"'>Tab 2a>li>

ul>

<div class='\"tab-content\"'>

  <div active\"="" class='\"tab-pane' fade="" id='\"tab1\"' in="">

    

  div>

  <div class='\"tab-pane' fade\"="" id='\"tab2\"'>

    

  div>

div>

在这个例子中，data-toggle=\"tab\"属性用于激活选项卡功能，.fade和.in类帮助实现平滑的过渡效果。默认情况下，第一个选项卡通过class=\"active\"来显示，其他选项卡在页面加载时是隐藏的。

为了启用这些功能，我们需要引入Bootstrap的CSS和JavaScript文件，以及jQuery库，以下是相关代码：

<link href='\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\"' rel='\"stylesheet\"'/>

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

<script src='\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js\"'>script>

如果希望使用纯JavaScript来实现选项卡切换，可以去掉data-toggle=\"tab\"属性，改为通过JavaScript控制。以下是使用纯JavaScript来实现选项卡切换的示例：

var tabLinks = document.querySelectorAll('.nav-tabs a');

for (var i = 0; i < tabLinks.length; i++) {

  tabLinks[i].addEventListener('click', function(e) {

    e.preventDefault();

    var target = this.getAttribute('href');

    var tabContent = document.querySelector(target);

    var parentLi = this.parentNode;

    // 移除其他选项卡的active类，添加到当前选项卡

    Array.from(tabLinks).forEach(function(link) {

      link.parentNode.classList.remove('active');

    });

    parentLi.classList.add('active');

    // 隐藏所有内容区域并显示选中的区域

    Array.from(document.querySelectorAll('.tab-pane')).forEach(function(pane) {

      pane.classList.remove('active');

    });

    tabContent.classList.add('active');

  });

}