JS+CSS实现仿msn风格选项卡效果代码

下面是详细讲解“JS+CSS实现仿msn风格选项卡效果代码”的完整攻略，包含以下几个步骤：

1. HTML结构

首先，我们需要在HTML中定义选项卡的基本结构，通常采用<ul>和<li>来表示。具体代码如下：

<ul class="tabnav">
  <li class="active"><a href="#">选项卡1</a></li>
  <li><a href="#">选项卡2</a></li>
  <li><a href="#">选项卡3</a></li>
</ul>
<div class="tabcontent">
  <div class="active">第1个选项卡的内容</div>
  <div>第2个选项卡的内容</div>
  <div>第3个选项卡的内容</div>
</div>

其中，tabnav类表示选项卡导航栏，tabcontent类表示选项卡内容区域，active类表示当前选项卡的样式。在这个示例中，第1个选项卡会被默认选中，并且相应的内容会被显示出来。

2. CSS样式

接着，我们需要为选项卡和内容定义CSS样式，对于选项卡导航栏，我们可以采用以下样式：

.tabnav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}
.tabnav li {
  margin-right: 15px;
}
.tabnav li a {
  display: block;
  padding: 10px;
  background-color: #eee;
  text-decoration: none;
  color: #333;
}
.tabnav li.active a {
  background-color: #fff;
}

这里采用了flex布局，使得选项卡可以水平排列。对于每个选项卡，采用了a标签并设置相关样式，同时，当选项卡处于激活状态时，讲改变背景色为白色。

接着为选项卡内容区域定义CSS样式：

.tabcontent div {
  display: none;
  padding: 10px;
  border: 1px solid #ccc;
}
.tabcontent div.active {
  display: block;
}

默认情况下，选项卡内容需要被隐藏，通过display: none实现。当选项卡处于激活状态时，将对应的内容项设置为display: block，即可实现显示。

3. JavaScript交互

最后，我们需要使用JavaScript实现选项卡的交互效果。具体代码如下：

var tabnav = document.querySelector('.tabnav');
var tabcontent = document.querySelector('.tabcontent');

tabnav.addEventListener('click', function(event) {
  var target = event.target;
  if (target.tagName === 'A') {
    var index = Array.from(tabnav.children).indexOf(target.parentNode);
    setActive(index);
  }
});

function setActive(index) {
  var tabs = tabnav.children;
  var contents = tabcontent.children;
  for (var i = 0; i < tabs.length; i++) {
    tabs[i].classList.remove('active');
    contents[i].classList.remove('active');
  }
  tabs[index].classList.add('active');
  contents[index].classList.add('active');
}

代码中首先获取选项卡导航栏和内容区域的DOM元素，然后给选项卡导航栏绑定click事件。当点击选项卡时，获取所点击的选项卡的索引，通过setActive函数设置相应的选项卡和内容项为激活状态。

其中，setActive函数会先将所有选项卡和内容项的激活状态清除，然后再将所选中的选项卡和内容项设置为激活状态。这样，就可以实现选项卡的交互效果了。

示例说明

以下是两个示例，分别实现了不同的选项卡效果。

示例1 - 垂直选项卡

这个示例中，将选项卡导航栏设置为垂直排列的形式，并在选项卡之间添加分割线。CSS样式如下：

.tabnav {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tabnav li {
  margin-bottom: 5px;
  border-bottom: 1px solid #ccc;
}
.tabnav li:last-child {
  margin-bottom: 0;
  border-bottom: none;
}
.tabnav li a {
  display: block;
  padding: 10px;
  background-color: #eee;
  text-decoration: none;
  color: #333;
}
.tabnav li.active a {
  background-color: #fff;
}

JavaScript交互部分保持不变。

具体效果可以参考如下的示例页面：

https://codepen.io/pen/?template=bqLzYa

示例2 - 嵌套选项卡

这个示例中，选项卡内容是另外一个选项卡导航栏。即当点击一个选项卡时，该选项卡下面的内容会是另外一个选项卡导航栏，对应的内容区域也是一个选项卡。CSS样式如下：

.tabnav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}
.tabnav li {
  margin-right: 15px;
}
.tabnav li a {
  display: block;
  padding: 10px;
  background-color: #eee;
  text-decoration: none;
  color: #333;
}
.tabnav li.active a {
  background-color: #fff;
}
.tabcontent > div {
  display: none;
  padding: 10px;
  border: 1px solid #ccc;
}
.tabcontent > div.active {
  display: block;
}

/* 嵌套选项卡 */
.tabcontent .tabnav {
  display: block;
}
.tabcontent .tabnav li {
  margin-right: 0;
  margin-bottom: 5px;
}
.tabcontent .tabnav li:first-child {
  border-top: 1px solid #ccc;
}
.tabcontent .tabnav li a {
  background-color: #fff;
  color: #333;
  border: 1px solid #ccc;
  border-top: none;
}
.tabcontent .tabnav li.active a {
  background-color: #eee;
}
.tabcontent .tabcontent {
  margin: 10px 0 0 20px;
}

JavaScript交互部分需要稍作调整，具体代码如下：

var tabnav = document.querySelector('.tabnav');
var tabcontent = document.querySelector('.tabcontent');

tabnav.addEventListener('click', function(event) {
  var target = event.target;
  if (target.tagName === 'A') {
    var index = Array.from(tabnav.children).indexOf(target.parentNode);
    if (target.parentNode.parentNode === tabnav) {
      setActive(index);
    } else {
      var parentIndex = Array.from(tabnav.children).indexOf(target.parentNode.parentNode);
      setNestedActive(parentIndex, index);
    }
  }
});

function setActive(index) {
  var tabs = tabnav.children;
  var contents = tabcontent.children;
  for (var i = 0; i < tabs.length; i++) {
    tabs[i].classList.remove('active');
    contents[i].classList.remove('active');
  }
  tabs[index].classList.add('active');
  contents[index].classList.add('active');
}

function setNestedActive(parentIndex, index) {
  var parentTabs = tabcontent.children[parentIndex].querySelector('.tabnav').children;
  var parentContents = tabcontent.children[parentIndex].querySelector('.tabcontent').children;
  for (var i = 0; i < parentTabs.length; i++) {
    parentTabs[i].classList.remove('active');
    parentContents[i].classList.remove('active');
  }
  parentTabs[index].classList.add('active');
  parentContents[index].classList.add('active');
}

以上就是完整的“JS+CSS实现仿msn风格选项卡效果代码”的攻略。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS+CSS实现仿msn风格选项卡效果代码 - Python技术站