第一次练习tab键切换

最新推荐文章于 2024-05-02 16:57:19 发布

不是你的波

最新推荐文章于 2024-05-02 16:57:19 发布

阅读量400

点赞数 1

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/weixin_69317131/article/details/124287034

版权

本文介绍如何使用JavaScript实现网页上的动态导航，通过给每个导航项设置自定义属性并监听点击事件，当用户点击时，内容区域会根据当前选中项的索引显示对应的内容，其余内容隐藏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 <script>
        //首先获取元素
        var lis = document.querySelector('.big-top').querySelectorAll('li');
        //获取元素
        var ps = document.querySelector('.big-bottom').querySelectorAll('p');
        for (var i = 0; i < lis.length; i++) {
            //设置一个自定义属性
            lis[i].setAttribute('index', i)
            lis[i].onclick = function() {
                for (var i = 0; i < lis.length; i++) {
                    lis[i].className = ''; //首先将所有背景颜色去除
                }
                this.className = 'current'; //下面相对应的显示
                var index = this.getAttribute('index');
                for (var i = 0; i < ps.length; i++) {
                    ps[i].style.display = 'none'; //首先也要将所有的隐藏，点击是显示对应的
                }
                ps[index].style.display = 'block';
            }
        }
    </script>

关注博主即可阅读全文