js 原生选项卡DEMO

最新推荐文章于 2024-11-02 19:19:35 发布

阿基米德·德斯布尔

最新推荐文章于 2024-11-02 19:19:35 发布

阅读量332

点赞数 10

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_43003858/article/details/135541171

版权

本文介绍了一个使用JavaScript和HTML/CSS实现的导航菜单，通过点击按钮切换显示不同的科目选项（科目一至科目四）。

摘要由CSDN通过智能技术生成

<style>
        .Active{
            background: red;
        }
        input{
            cursor: pointer;
        }

        .Slot{
            width: 280px;
            height: 240px;
            border: 1px solid red;
            display: none;
            
        }
        .ActiveSlot{
            display: block !important;
        }
    </style>



<div>
        <div id="NavList"></div>
        <div>
            <div class="Slot">
                <p>科目一</p>
            </div>

            <div class="Slot">
                <p>科目二</p>
            </div>

            <div class="Slot">
                <p>科目三</p>
            </div>

            <div class="Slot">
                <p>科目四</p>
            </div>
        </div>
    </div>




<script>
        var arr = [{title:"科目一"},{title:"科目二"},{title:"科目三"},{title:"科目四"}]
        var arrStr = ''
        var index = 0
        function onLoad(){
            document.getElementById('NavList').innerHTML = ''
            arrStr = ''
            var conterBox = document.getElementsByClassName('Slot')
            arr.forEach((temp,i)=>{
                arrStr+=`
                    <input type="button" value="${temp.title}" class="${i == index ? 'Active':''} " onclick="getActive(${i})" />
                `
                if(conterBox[i].classList.length !== 1){
                    conterBox[i].classList.remove('ActiveSlot')
                }
            })
            document.getElementById('NavList').innerHTML = arrStr
            document.getElementsByClassName('Slot')[index].classList.add('ActiveSlot')
            }
        function getActive(e){
            index = e
            onLoad()
        }
        onLoad()
    </script>