JavaScript案例——tap切换栏和下拉菜单

最新推荐文章于 2024-05-28 11:44:38 发布

猫猫和夏天

最新推荐文章于 2024-05-28 11:44:38 发布

阅读量342

点赞数 3

文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/2301_81360104/article/details/137155350

版权

tap切换栏和下拉菜单都是当用户对上面的模块进行一定操作后，下面会出现不同的内容。

区别是tap切换栏是当鼠标点击上面相应的选项卡(tab)，下面内容跟着变化；

而下拉菜单是当鼠标移动到上面对应的选项卡后，下面的内容随着改变。

一、下拉菜单

核心思路：

1、先用几个li做头部排到一起，然后每个li里面放一个链接a，a下面再放ui，ul是定位到a下面的

2、导航栏里面的li都要有鼠标经过的效果，所以需要循环注册鼠标事件

3、当鼠标经过li里面时，第二个孩子ul显示，当鼠标离开，ul隐藏

下面是代码内容：

这是css部分

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style-type: none;
        }

        a {
            text-decoration: none;
            font-size: 14px;
        }

        .nav {
            margin: 100px;
        }

        .nav>li {
            position: relative;
            float: left;
            width: 80px;
            height: 41px;
            text-align: center;
        }

        .nav li a {
            display: block;
            width: 100%;
            height: 100%;
            line-height: 41px;
            color: #333;
            background-color: rgb(225, 227, 227);
        }

        .nav>li>a:hover {
            background-color: #ffffff;
        }

        .nav ul {
            display: none;
            position: absolute;
            top: 41px;
            left: 0;
            width: 100%;
            border-left: 1px solid #FECC5B;
            border-right: 1px solid #FECC5B;
        }

        .nav ul li {
            border-bottom: 1px solid #FECC5B;
        }

        .nav ul li a:hover {
            background-color: #FFF5DA;
        }
    </style>

这是html和js的部分：

<body>
    <ul class="nav">
        <li>
            <a href="#">消息</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">发布微博</a>
                </li>
                <li>
                    <a href="">收藏</a>
                </li>
                <li>
                    <a href="">历史</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">邮箱</a>
            <ul>
                <li>
                    <a href="">邮箱内容</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">主页</a>
            <ul>
                <li>
                    <a href="">我的主页</a>
                </li>
            </ul>
        </li>
    </ul>
    <script>

        // 1. 获取元素
        var nav = document.querySelector('.nav');
        var lis = nav.children; // 得到4个小li

        // 2.循环注册事件
        for (var i = 0; i < lis.length; i++) {
            lis[i].onmouseover = function () {
                //让li里面的ul(第二个孩子)显示出来。*children[1]是第二个，0才是第一个
                this.children[1].style.display = 'block';
            }
            lis[i].onmouseout = function () {
                this.children[1].style.display = 'none';
            }
        }
    </script>
</body>

最后面实现的效果是这样的：

图片中是我将鼠标移动到“消息”后所显示的内容

二、tap切换栏

核心思路：

1、tab栏先分为上下两大模块

2、上的模块选项卡，在点击某一个后，当前的底色会变成红色，其他不变(排他思想)，修改类名的方式

3、上面的模块内容会随着上面的选项卡变化，所以下面的模块内容写到点击事件里面

4、下面的模块内容和上面的选项卡是一一对应，相匹配的

5、给上面的tab-list里面的所以小li添加自定义属性，属性值从0开始编号

6、当我们点击tab-list里面的某个小li，让tab-con里面对应序号的内容显示，其余隐藏(排他思想)

下面是代码内容

这是css部分：

 <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style-type: none;
        }

        .tab {
            width: 538px;
            margin: 100px auto;
        }

        .tab_list {
            height: 39px;
            border: 1px solid #ccc;
            background-color: #f1f1f1;
        }

        .tab_list li {
            float: left;
            height: 39px;
            line-height: 39px;
            padding: 0 20px;
            text-align: center;
            cursor: pointer;
        }

        .tab_list .current {
            background-color: #c81623;
            color: #fff;
        }

        .item_info {
            padding: 20px 0 0 20px;
        }

        .item {
            display: none;
        }
    </style>

这是html和js部分：

<body>
    <div class="tab">
        <div class="tab_list">
            <ul>
                <li class="current">商品介绍</li>
                <li>规格与包装</li>
                <li>售后保障</li>
                <li>商品评价</li>
                <li>手机社区</li>
            </ul>
        </div>
        <div class="tab_con">
            <div class="item" style="display: block;">
                商品介绍模块内容
            </div>
            <div class="item">
                规格与包装模块内容
            </div>
            <div class="item">
                售后保障模块内容
            </div>
            <div class="item">
                商品评价模块内容
            </div>
            <div class="item">
                手机社区模块内容
            </div>

        </div>
    </div>


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


        // for循环绑定点击事件
        for (var i = 0; i < lis.length; i++) {

            // 开始给5个小li 设置索引号 ，使下面的模块内容和上面的选项卡得到一一对应
            lis[i].setAttribute('index', i);

            lis[i].onclick = function () {

                // 1. 上的模块选项卡，点击某一个，当前这一个底色会是红色，其余不变（排他思想） 修改类名的方式
                // 干掉所有人 其余的li清除 class 这个类
                for (var i = 0; i < lis.length; i++) {
                    lis[i].className = '';
                }

                // 留下我自己 
                this.className = 'current';


                // 2. 下面的显示内容模块

                //得到当前index属性里面的属性值
                var index = this.getAttribute('index');
                console.log(index);


                // 干掉所有人 让其余的item 这些div 隐藏
                for (var i = 0; i < items.length; i++) {
                    items[i].style.display = 'none';
                }

                // 留下我自己 让对应的item 显示出来
                items[index].style.display = 'block';
            }
        }
    </script>
</body>

最后面实现的效果是这样的：