JS(javascript)API案例：html中如何实现选项卡切换并在特定的位置显示内容？

最新推荐文章于 2023-01-04 18:22:23 发布

原创最新推荐文章于 2023-01-04 18:22:23 发布 · 522 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#js #css #html #javascript #css3

笔记专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用JavaScript API实现HTML中的选项卡切换功能，点击不同选项卡时，相应的内容将在指定位置显示。包含CSS样式和JavaScript代码示例。

实现选项卡切换；实现在点击选项卡时在特定位置显示特定内容！

效果展示
在这里插入图片描述

css部分

        #box {
            width: 500px;
            height: 350px;
        }

        .header {
            width: 500px;
            height: 40px;
            background-color: #aaa;
            border-bottom: 1px solid red;
        }

        ul>li {
            float: left;
            line-height: 40px;
            list-style: none;
            padding: 0 30px;
            cursor: pointer;
        }

        .list_sty {
            background-color: red;
            color: white;
        }

        .main>div {
            display: none;
        }

        img {
            width: 500px;
            height: 310px;
        }

body部分

 <div id="box">
        <div class="header">
            <ul>
                <li class="list_sty">Have</li>
                <li>you</li>
                <li>learned</li>
                <li>it?</li>
            </ul>
        </div>
        <di class="main">
            <div class="item" style="display: block;"><img src="images/2002023.jpg"></div>
            <div class="item"><img src="images/2005690.jpg"></div>
            <div class="item"><img src="images/2011951.jpg" alt=""></div>
            <div class="item"><img src="images/2010634.jpg" alt=""></div>
    </div>
    </div>

JS部分

 <script>
        //获取元素
        var header = document.getElementsByClassName('header');
        var lis = document.querySelectorAll('li');
        var items = document.querySelectorAll('.item')

        for (var i = 0; i < lis.length; i++) {
            lis[i].setAttribute('index', i)//自定义属性便于获取每个li
            lis[i].onclick = function () {
                for (i = 0; i < lis.length; i++) {
                    lis[i].className = '';//排他思想，其余清除样式
                }
                this.className = 'list_sty';//留下当前样式
                var index = this.getAttribute('index');
                for (var i = 0; i < items.length; i++) {
                    items[i].style.display = 'none';//其余div隐藏
                }
                items[index].style.display = 'block';//留下当前的
            }
        }
    </script>

如果觉得对您有帮助，不要忘了留下赞再走哟！
在这里插入图片描述