javascript、实现的选项卡

利用 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>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值