JS 切换案例 - Javascript

在Web开发中，切换是一种常见的交互方式，JS是切换功能实现的重要工具之一。本文将介绍几种JS切换案例，包括DOM元素切换、图片轮播切换、Tab切换等。

DOM元素切换

DOM元素切换是指通过JS操作DOM元素的显示和隐藏来实现页面切换的效果。通常，我们会给切换目标元素添加一个class来标记其显示状态，然后通过JS来动态改变该class的值。

// HTML
<div class="target">目标元素</div>

// CSS
.target {
    display: none;
}
.target.active {
    display: block;
}

// JS
var target = document.querySelector('.target');
target.classList.toggle('active');

在上面的代码中，我们首先通过querySelector方法获取了目标元素，然后使用classList.toggle方法将目标元素的class设置为active，这会使目标元素从隐藏状态变为显示状态。

图片轮播切换

图片轮播是Web开发中非常常见的功能之一。通常，我们会使用JS来实现轮播的自动播放、手动切换等功能。下面的代码演示了如何实现一个简单的图片轮播。

// HTML
<div class="carousel">
    <ul>
        <li><img src="image1.jpg"></li>
        <li><img src="image2.jpg"></li>
        <li><img src="image3.jpg"></li>
        <li><img src="image4.jpg"></li>
    </ul>
    <div class="prev">上一张</div>
    <div class="next">下一张</div>
</div>

// CSS
.carousel li {
    display: none;
}
.carousel li.active {
    display: block;
}

// JS
var carousel = document.querySelector('.carousel');
var lis = carousel.querySelectorAll('li');
var currentIndex = 0;
var timer = null;

function play() {
    timer = setInterval(function() {
        lis[currentIndex].classList.remove('active');
        currentIndex = (currentIndex + 1) % lis.length;
        lis[currentIndex].classList.add('active');
    }, 2000);
}

play();

var prev = carousel.querySelector('.prev');
prev.addEventListener('click', function() {
    lis[currentIndex].classList.remove('active');
    currentIndex = (currentIndex - 1 + lis.length) % lis.length;
    lis[currentIndex].classList.add('active');
});

var next = carousel.querySelector('.next');
next.addEventListener('click', function() {
    lis[currentIndex].classList.remove('active');
    currentIndex = (currentIndex + 1) % lis.length;
    lis[currentIndex].classList.add('active');
});

在上面的代码中，我们首先定义了一个play函数，该函数使用setInterval方法定时切换轮播图。然后我们使用addEventListener方法给prev和next按钮添加了点击事件，点击按钮后会切换到上一张或下一张轮播图。

Tab切换

Tab切换是一种常见的页面布局方式，它可以在单个页面内展示多个内容区域，方便用户快速切换不同的内容。下面的代码演示了如何使用JS实现一个简单的Tab切换。

// HTML
<div class="tabs">
    <ul>
        <li><a href="#tab1">标签1</a></li>
        <li><a href="#tab2">标签2</a></li>
        <li><a href="#tab3">标签3</a></li>
    </ul>
    <div id="tab1">标签1内容</div>
    <div id="tab2">标签2内容</div>
    <div id="tab3">标签3内容</div>
</div>

// CSS
.tabs div {
    display: none;
}
.tabs div.active {
    display: block;
}

// JS
var tabs = document.querySelector('.tabs');
var lis = tabs.querySelectorAll('li');
var contents = tabs.querySelectorAll('div');

for (var i = 0; i < lis.length; i++) {
    lis[i].addEventListener('click', function(e) {
        e.preventDefault();
        for (var j = 0; j < lis.length; j++) {
            lis[j].classList.remove('active');
            contents[j].classList.remove('active');
        }
        this.classList.add('active');
        var href = this.querySelector('a').getAttribute('href');
        tabs.querySelector(href).classList.add('active');
    });
}

在上面的代码中，我们定义了一个click事件处理函数，该函数会在用户点击Tab标签时触发。点击事件处理函数首先会遍历所有的Tab标签和内容区域，移除它们的active类名。然后将当前点击的Tab标签和对应的内容区域添加active类名。这会使之前隐藏的内容区域显示出来，以及将之前选中的Tab标签样式还原，并为当前选中的Tab标签添加样式。