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