一个精简的JS DIV层tab切换代码

下面是一个精简的JS DIV层tab切换代码的完整攻略。

什么是DIV层tab切换？

在网站中，为了将内容进行分类，我们会将内容放在不同的tab标签中，这些标签可以通过切换来显示不同的内容区域。而DIV层tab切换就是一种常见的实现方式，它基于DIV层和JavaScript代码来完成。

如何实现DIV层tab切换？

首先，我们需要在HTML中添加DIV标签，每个DIV表示一个内容区域。然后，我们需要添加tab标签，点击tab标签时可以切换不同的内容区域。接下来，我们需要编写JavaScript代码，监听tab标签的点击事件，当点击事件触发时，切换不同的内容区域。

实现步骤

HTML代码。首先，我们需要定义一组tab标签和对应的内容区域，如下所示：

<div class="tab-container">
  <ul class="tab-nav clearfix">
    <li class="active">Tab A</li>
    <li>Tab B</li>
    <li>Tab C</li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active">Content A</div>
    <div class="tab-pane">Content B</div>
    <div class="tab-pane">Content C</div>
  </div>
</div>

其中，tab-nav表示tab标签，tab-content表示内容区域。我们使用active来表示当前选中的标签和内容区域。

CSS代码。我们需要为tab标签和内容区域添加样式，如下所示：

.tab-nav li {
  float: left;
  margin-right: 20px;
  cursor: pointer;
}

.tab-nav li.active {
  font-weight: bold;
}

.tab-pane {
  display: none;
}

.tab-pane.active {
  display: block;
}

其中，tab-nav样式用来设置tab标签的样式，tab-pane样式用来设置内容区域的样式。使用display:none来隐藏非选中的内容区域，使用display:block来显示选中的内容区域。

JavaScript代码。我们需要监听tab标签的点击事件，当点击事件触发时，切换不同的内容区域。代码如下所示：

var tabContainer = document.querySelector('.tab-container');
var tabNavs = tabContainer.querySelectorAll('.tab-nav li');
var tabPanes = tabContainer.querySelectorAll('.tab-pane');

for (var i = 0; i < tabNavs.length; i++) {
  tabNavs[i].onclick = function() {
    // 取消所有选中状态
    for (var j = 0; j < tabNavs.length; j++) {
      tabNavs[j].classList.remove('active');
    }
    for (var k = 0; k < tabPanes.length; k++) {
      tabPanes[k].classList.remove('active');
    }

    // 添加当前选中状态
    this.classList.add('active');
    var index = Array.prototype.indexOf.call(this.parentNode.children, this);
    tabPanes[index].classList.add('active');
  }
}

其中，我们使用querySelector和querySelectorAll来获取相关元素。然后，我们遍历tab标签，为每个标签绑定一个点击事件。当点击事件触发时，我们首先清空所有选中状态，然后选中当前标签和对应的内容区域。

示例说明

下面给出两个示例，分别实现了左右切换和自动切换的效果。

示例1：左右切换

在tab-nav标签列表的左右两侧放置prev和next标签，点击prev可以切换到前一个tab标签，点击next可以切换到下一个tab标签。代码如下所示：

<div class="tab-container">
  <ul class="tab-nav clearfix">
    <li class="active">Tab A</li>
    <li>Tab B</li>
    <li>Tab C</li>
    <li class="prev"><< prev</li>
    <li class="next">next >></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active">Content A</div>
    <div class="tab-pane">Content B</div>
    <div class="tab-pane">Content C</div>
  </div>
</div>

<style>
.tab-nav li.prev,
.tab-nav li.next {
  font-weight: normal;
  cursor: pointer;
}

.tab-nav li.prev {
  float: left;
}

.tab-nav li.next {
  float: right;
}

.tab-nav li.prev:hover,
.tab-nav li.next:hover {
  font-weight: bold;
}

.tab-nav li.prev.disabled,
.tab-nav li.next.disabled {
  color: #ccc;
  cursor: default;
  pointer-events: none;
}

.tab-nav li.prev.disabled:hover,
.tab-nav li.next.disabled:hover {
  font-weight: normal;
  text-decoration: none;
}
</style>

<script>
var tabContainer = document.querySelector('.tab-container');
var tabNavs = tabContainer.querySelectorAll('.tab-nav li');
var tabPanes = tabContainer.querySelectorAll('.tab-pane');
var prev = tabContainer.querySelector('.prev');
var next = tabContainer.querySelector('.next');

var cursor = 0; // 当前选中标签的索引

prev.onclick = function() {
  if (cursor > 0) {
    tabNavs[cursor].classList.remove('active');
    tabPanes[cursor].classList.remove('active');

    cursor--;
    tabNavs[cursor].classList.add('active');
    tabPanes[cursor].classList.add('active');

    updateNavStatus(); // 更新prev和next的状态
  }
}

next.onclick = function() {
  if (cursor < tabNavs.length - 3) {
    tabNavs[cursor].classList.remove('active');
    tabPanes[cursor].classList.remove('active');

    cursor++;
    tabNavs[cursor].classList.add('active');
    tabPanes[cursor].classList.add('active');

    updateNavStatus(); // 更新prev和next的状态
  }
}

function updateNavStatus() {
  if (cursor === 0) {
    prev.classList.add('disabled');
  } else {
    prev.classList.remove('disabled');
  }

  if (cursor === tabNavs.length - 3) {
    next.classList.add('disabled');
  } else {
    next.classList.remove('disabled');
  }
}
</script>

示例2：自动切换

自动切换可以设置一个定时器，每隔一定时间切换到下一个tab标签。代码如下所示：

<div class="tab-container">
  <ul class="tab-nav clearfix">
    <li class="active">Tab A</li>
    <li>Tab B</li>
    <li>Tab C</li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active">Content A</div>
    <div class="tab-pane">Content B</div>
    <div class="tab-pane">Content C</div>
  </div>
</div>

<style>
.tab-nav li.active {
  font-weight: bold;
}

.tab-nav li:hover {
  font-weight: bold;
}

.tab-nav li.prev.disabled,
.tab-nav li.next.disabled {
  pointer-events: none;
}

.tab-nav li.prev.disabled:hover,
.tab-nav li.next.disabled:hover {
  font-weight: normal;
  text-decoration: none;
}
</style>

<script>
var tabContainer = document.querySelector('.tab-container');
var tabNavs = tabContainer.querySelectorAll('.tab-nav li');
var tabPanes = tabContainer.querySelectorAll('.tab-pane');
var timer = null;
var duration = 2000; // 定时器间隔
var cursor = 0; // 当前选中标签的索引

function start() {
  timer = setInterval(function() {
    tabNavs[cursor].classList.remove('active');
    tabPanes[cursor].classList.remove('active');

    cursor++;
    if (cursor >= tabNavs.length) {
      cursor = 0; // 循环
    }

    tabNavs[cursor].classList.add('active');
    tabPanes[cursor].classList.add('active');

    updateNavStatus(); // 更新prev和next的状态
  }, duration);
}

function stop() {
  clearInterval(timer);
}

start(); // 启动定时器

tabContainer.onmouseover = function() {
  stop();
}

tabContainer.onmouseout = function() {
  start();
}

function updateNavStatus() {
  if (cursor === 0) {
    tabNavs[tabNavs.length - 1].classList.add('disabled');
    tabNavs[cursor + 1].classList.remove('disabled');
  } else if (cursor === tabNavs.length - 1) {
    tabNavs[0].classList.remove('disabled');
    tabNavs[cursor - 1].classList.add('disabled');
  } else {
    tabNavs[cursor - 1].classList.add('disabled');
    tabNavs[cursor + 1].classList.remove('disabled');
  }
}
</script>

以上是DIV层tab切换的具体实现方式，希望对大家有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：一个精简的JS DIV层tab切换代码 - Python技术站