实现导航栏的切换操作

最新推荐文章于 2024-08-30 15:33:13 发布

立志成为有钱人

最新推荐文章于 2024-08-30 15:33:13 发布

阅读量188

点赞数 2

文章标签： css css3 html javascript

本文链接：https://blog.csdn.net/2301_79605560/article/details/140576331

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li {
            display: inline-block;
            padding: 30px;
        }

        .moren {
            background-color: red;
        }

        .item {
            display: none;
        }

        .current {
            background-color: red;
        }
    </style>

</head>

<body>
    <div class="one">
        <ul>
            <li class="moren">商品介绍</li>
            <li>规格与包装</li>
            <li>售后保障</li>
            <li>商品评价</li>
            <li>手机社区</li>


        </ul>
    </div>
    <div class="two">
        <div class="item" style="display: block;">商品介绍内容</div>
        <div class="item">规格与包装内容</div>
        <div class="item">售后保障内容</div>
        <div class="item">产品评间内容</div>
        <div class="item">手机社区内容</div>
    </div>
</body>
<script>

    var lis = document.querySelectorAll('li');
    var items = document.querySelectorAll('.item');
    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 < items.length; i++) {

                items[i].style.display = 'none';

            }
            items[index].style.display = 'block';
        }
    }
</script>

</html>

运行结果如下：

核心思想就是（我说的比较通俗）：第一步，点击导航栏的时候，会变色，很简单，就是一个“排他思想”，注意：隐藏所有在前面，当点击的时候，对应的显示在后面。第二步，导航栏的时候，对于内容会出现，这里比较复杂，就是，给所有的标题自定义属性，用for循坏，当点击哪个标题，对应的内容显现。（这里还是排他思想）因为其他的内容不显示。对应可以看两个for循坏里面的内容很相似。

立志成为有钱人

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实现导航栏的切换操作

核心思想就是（我说的比较通俗）：第一步，点击导航栏的时候，会变色，很简单，就是一个“排他思想”，注意：隐藏所有在前面，当点击的时候，对应的显示在后面。第二步，导航栏的时候，对于内容会出现，这里比较复杂，就是，给所有的标题自定义属性，用for循坏，当点击哪个标题，对应的内容显现。（这里还是排他思想）因为其他的内容不显示。对应可以看两个for循坏里面的内容很相似。
复制链接

扫一扫