JS选项卡

简介: JS选项卡
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <style type="text/css">
            * {
                text-align: center;
            }
            .ul li {
                display: inline;
                width: 30%;
                text-decoration: none;
                padding: 18px;
            }
            .asd {
                background-color: blueviolet;
            }
            section {
                height: 300px;
            }
        </style>
        <div id="nav">
            <ul class="ul">
                <li class="asd">选项1</li>
                <li>选项2</li>
                <li>选项3</li>
                <li>选项4</li>
            </ul>
        </div>
        <div>
            <section class="tab" style="background-color: #7FFF00;"></section>
            <section class="tab" style="background-color: #ADD8E6;"></section>
            <section class="tab" style="background-color: antiquewhite;"></section>
            <section class="tab" style="background-color: aqua;"></section>
        </div>
        <script type="text/javascript">
            var Nav = document.getElementsByTagName('li'); //引入HTML里的元素
            console.log(Nav)
            var Div = document.getElementsByClassName('tab');
            console.log(Div)
            for (var m = 1; m < Div.length; m++) { //使用for循环,全部隐藏 只显示第一个
                Div[m].style.display = "none";
            }
            for (let i = 0; i < Nav.length; i++) { //先全部循环一遍,加入点击事件
                Nav[i].onclick = function() {
                    console.log(i);
                    for (var a = 0; a < Nav.length; a++) { //循环Nav标签,把Nav的className清空,Div标签隐藏
                        Nav[a].className = '';
                        Div[a].style.display = "none";
                    }
                    Nav[i].className = 'asd'; //循环到这里,点击事件的显示
                    Div[i].style.display = "block";
                }
            }
        </script>
    </body>
</html>
相关文章
|
6月前
|
JavaScript 前端开发
如何用JS实现选项卡功能
如何用JS实现选项卡功能
48 0
|
2月前
|
存储 JavaScript 前端开发
JavaScript编程实现tab选项卡切换的效果+1
JavaScript编程实现tab选项卡切换的效果+1
|
21天前
|
JavaScript
js实现的精美彩色tab选项卡切换特效源码
js实现的精美彩色tab选项卡切换特效源码是一段基于JS实现的文件夹tab选项卡切换效果,拥有彩色、单色两种选择,点击标签选项卡可实现相应的变色效果,非常有意思,欢迎对此段代码感兴趣的朋友前来下载使用。
27 2
|
1月前
|
JavaScript
js学习--制作选项卡
js学习--制作选项卡
37 4
用CSS+JavaScript打造网页中的选项卡
用CSS+JavaScript打造网页中的选项卡
|
2月前
|
JavaScript 前端开发
JavaScript编程实现tab选项卡切换的效果
JavaScript编程实现tab选项卡切换的效果
|
3月前
|
JavaScript 前端开发
JS选项卡如何制作
JS选项卡如何制作
|
3月前
|
JavaScript
js之选项卡制作实例
js之选项卡制作实例
31 0
|
5月前
|
JavaScript
JS选项卡如何制作
JS选项卡如何制作