js实现选项卡内容切换以及折叠和展开效果【推荐】

下面我会为你详细讲解"js实现选项卡内容切换以及折叠和展开效果"的实现方法。

一、实现选项卡切换

选项卡切换是网站中常见的交互效果，下面是实现选项卡切换的步骤：

1. html代码中添加需要切换的内容，每一个选项卡对应一个内容区域，为每一个选项卡和内容区域添加相应的id，如下：

<div class="tab">
  <ul class="tab-nav">
    <li class="active" data-tab="tab1">选项卡1</li>
    <li data-tab="tab2">选项卡2</li>
    <li data-tab="tab3">选项卡3</li>
  </ul>
  <div class="tab-content">
    <div id="tab1" class="active">内容1</div>
    <div id="tab2">内容2</div>
    <div id="tab3">内容3</div>
  </div>
</div>

1. css代码中设置样式：

.tab-nav li.active {
    background-color: #fff;
}
.tab-content div {
    display: none;
}
.tab-content div.active {
    display: block;
}

1. js代码中添加事件监听，切换选项卡时添加和删除相应class，使选项卡和内容区域显示或隐藏：

var tabs = document.querySelectorAll('.tab-nav li');
for(var i = 0;i < tabs.length; i++) {
    tabs[i].addEventListener('click', function(ev){
        var tab = ev.target.dataset.tab;
        var content = document.getElementById(tab);
        var currentTab = document.querySelector('.tab-nav li.active');
        var currentContent = document.querySelector('.tab-content div.active');
        currentTab.classList.remove('active');
        currentContent.classList.remove('active');
        ev.target.classList.add('active');
        content.classList.add('active');
    })
}

二、实现 折叠和展开效果

折叠和展开效果是网站中常见的交互效果，下面是实现折叠和展开效果的步骤：

1. html代码中添加需要折叠和展开的内容，为每一个需要折叠和展开的元素添加相应的class和data属性，如下：

<div class="accordion">
  <div class="accordion-header" data-accordion="accordion1">标题1</div>
  <div class="accordion-body" data-accordion="accordion1">内容1</div>
  <div class="accordion-header" data-accordion="accordion2">标题2</div>
  <div class="accordion-body" data-accordion="accordion2">内容2</div>
</div>

1. css代码中设置样式：

.accordion .accordion-header {
    cursor: pointer;
}
.accordion .accordion-body {
    display: none;
}
.accordion .accordion-body.active {
    display: block;
}

1. js代码中添加事件监听，点击标题时添加和删除相应class，使内容区域展开或折叠：

var headers = document.querySelectorAll('.accordion-header');
for(var i = 0;i < headers.length; i++) {
    headers[i].addEventListener('click', function(ev){
        var accordion = ev.target.dataset.accordion;
        var body = document.querySelector('.accordion-body[data-accordion="' + accordion + '"]');
        body.classList.toggle('active');
    })
}

这样就完成了选项卡切换和折叠展开效果的实现。

下面是一个选项卡切换和一个折叠展开效果的示例代码：

<div class="tab">
  <ul class="tab-nav">
    <li class="active" data-tab="tab1">选项卡1</li>
    <li data-tab="tab2">选项卡2</li>
    <li data-tab="tab3">选项卡3</li>
  </ul>
  <div class="tab-content">
    <div id="tab1" class="active">内容1</div>
    <div id="tab2">内容2</div>
    <div id="tab3">内容3</div>
  </div>
</div>

<div class="accordion">
  <div class="accordion-header" data-accordion="accordion1">标题1</div>
  <div class="accordion-body" data-accordion="accordion1">内容1</div>
  <div class="accordion-header" data-accordion="accordion2">标题2</div>
  <div class="accordion-body" data-accordion="accordion2">内容2</div>
</div>

<!-- css代码 -->
<style>
.tab-nav li.active {
    background-color: #fff;
}
.tab-content div {
    display: none;
}
.tab-content div.active {
    display: block;
}
.accordion .accordion-header {
    cursor: pointer;
}
.accordion .accordion-body {
    display: none;
}
.accordion .accordion-body.active {
    display: block;
}
</style>

<!-- js代码 -->
<script type="text/javascript">
var tabs = document.querySelectorAll('.tab-nav li');
for(var i = 0;i < tabs.length; i++) {
    tabs[i].addEventListener('click', function(ev){
        var tab = ev.target.dataset.tab;
        var content = document.getElementById(tab);
        var currentTab = document.querySelector('.tab-nav li.active');
        var currentContent = document.querySelector('.tab-content div.active');
        currentTab.classList.remove('active');
        currentContent.classList.remove('active');
        ev.target.classList.add('active');
        content.classList.add('active');
    })
}

var headers = document.querySelectorAll('.accordion-header');
for(var i = 0;i < headers.length; i++) {
    headers[i].addEventListener('click', function(ev){
        var accordion = ev.target.dataset.accordion;
        var body = document.querySelector('.accordion-body[data-accordion="' + accordion + '"]');
        body.classList.toggle('active');
    })
}
</script>