javascript、实现的选项卡

最新推荐文章于 2024-07-28 20:27:10 发布

茶卡丶小雨

最新推荐文章于 2024-07-28 20:27:10 发布

阅读量102

点赞数

分类专栏： js、笔记案例实现文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_67674653/article/details/125344816

版权

js、笔记同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

案例实现

7 篇文章 0 订阅

订阅专栏

利用 onmouseover 实现鼠标移入后触发效果。

<script>

    // 1. 获取节点
    let box = all_$('.box li');
    let content = all_$('.content li');


    // 2. 给所有的box 添加点击事件

    for(let i = 0;i<box.length;i++){  // 循环标题
        
            // 鼠标移入后执行条件
        box[i].onmouseover = function(){
                    // 循环内部内容
            for (let j = 0; j < box.length; j++) {
                        // 第一个标题默认
                box[j].classList.remove('actived');
                        // 鼠标离开后关闭展示
                content[j].style.display = 'none';
            }
                        // 鼠标移入后展示内容
            this.classList.add('actived');     // 默认 
            content[i].style.display = 'block'; //展示

        }


    }
</script>

body简单举例，也可以换成图片或者视频。

<body>
    <div class="sample">
        <ul class="box">
            <li class="actived">首页</li>
            <li>新闻</li>
            <li>军事</li>
            <li>娱乐</li>
            <li>关于我们</li>
        </ul>

        <ul class="content">
            <li style="display: block;">1
                中新网4月14日电 据商务部网站消息，
                商务部外贸司负责人14日表示， 
                2021年一季度中国外贸增势良好，
                好于疫情前水平。 预计，
                全年外贸增速将呈现“前高后低”的走势，
                不能盲目乐观。
            </li>
            <li>2
                中新网4月14日电 据商务部网站消息，
                商务部外贸司负责人14日表示，
                2021年一季度中国外贸增势良好，
                好于疫情前水平。 预计，
                全年外贸增速将呈现“前高后低”的走势，
                不能盲目乐观。
            </li>
            <li>3
                中新网4月14日电 据商务部网站消息，
                商务部外贸司负责人14日表示，
                2021年一季度中国外贸增势良好，
                好于疫情前水平。 预计，
                全年外贸增速将呈现“前高后低”的走势，
                不能盲目乐观。
            </li>
            <li>4
                中新网4月14日电 据商务部网站消息，
                商务部外贸司负责人14日表示，
                2021年一季度中国外贸增势良好，
                好于疫情前水平。 预计，
                全年外贸增速将呈现“前高后低”的走势，
                不能盲目乐观。
            </li>
            <li>5
                中新网4月14日电 据商务部网站消息，
                商务部外贸司负责人14日表示，
                2021年一季度中国外贸增势良好，
                好于疫情前水平。 预计，
                全年外贸增速将呈现“前高后低”的走势，
                不能盲目乐观。
            </li>
        </ul>
    </div>
</body>

表单样式就没有下太大功夫，凑着看吧。

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }
        .sample{
            width: 500px;
            height: 400px;
            border: 1px solid aqua;
            margin: 100px auto;
        }
        .sample .box{
            width: 100%;
            display: flex;
            border: 1px solid black;
        }
        .sample .box>li{
            flex: 1;
            text-align: center;
            line-height: 50px;
            cursor: pointer;
            user-select: none; /* 清除选定 */
        }
        .sample .actived{
            background: rgb(160, 195, 160);
            color: #ff6700;
        }
        .sample .content{
            width: 100%;
            height: 350px;
        }
        .content li{
            width: 100%;
            height: 100%;
            display: none;
            padding: 5px;
            letter-spacing: 1px;  /* 字体间隔 */
            line-height: 30px;
            box-sizing: border-box;
        }
        
    </style>