预计效果
为了在网页布局有限的区域尽可能多地显示内容，很多网站在首页中普遍采用了选项卡和标签页相结合的内容显示方式。
效果如下图
当鼠标移动到娱乐的标签上，页面变为如下图
代码
完整代码和需要图片可在我的GitHub中找到，也可自行寻找图片，链接在此
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>>选项卡控制标签页的显示或隐藏</title>
<style type="text/css">
*{
font-family: "微软雅黑";
font-size: 14px;
}
a img{
border: none;
}
#controlSlide{
width: 360px;
height: 29px;
color: #666;
margin: 0;
padding: 0;
background-color: #5899ce;
}
#controlSlide li{
float: left;
width: 45px;
height: 24px;
line-height: 24px;
background-color: #5899ce;
text-align: center;
padding-bottom: 3px;
}
#controlSlide li a{
text-decoration: none;
color: #003276;
cursor: pointer;
}
#controlSlide li.current{
width: 45px;
background-color: black;
}
#controlSlide li.current a{
color: white;
}
.newImg{
width: 360px;
height: 220px;
}
li{
list-style-type: none;
}
</style>
<script type="text/javascript">
function setCurrentTab(index) {
for (var i = 1; i <= 8; i++)
{
if (i == index)
{
document.getElementById("slide_" + i).className = "current";
document.getElementById("tab_" + i).style.display = "block";
}
else
{
document.getElementById("slide_" + i).className = "";
document.getElementById("tab_" + i).style.display = "none";
}
}
}
</script>
</head>
<body>
<div>
<ul id="controlSlide">
<li id="slide_1" onmouseover="setCurrentTab(1);" class="current"><a href="#" target="_blank">国际</a></li>
<li id="slide_2" onmouseover="setCurrentTab(2);"><a href="#" target="_blank">娱乐</a></li>
<li id="slide_3" onmouseover="setCurrentTab(3);"><a href="#" target="_blank">体育</a></li>
<li id="slide_4" onmouseover="setCurrentTab(4);"><a href="#" target="_blank">汽车</a></li>
<li id="slide_5" onmouseover="setCurrentTab(5);"><a href="#" target="_blank">军事</a></li>
<li id="slide_6" onmouseover="setCurrentTab(6);"><a href="#" target="_blank">社会</a></li>
<li id="slide_7" onmouseover="setCurrentTab(7);"><a href="#" target="_blank">游戏</a></li>
<li id="slide_8" onmouseover="setCurrentTab(8);"><a href="#" target="_blank">科技</a></li>
</ul>
<div id="divTabList">
<div class="divTab" id="tab_1">
<a href="#"><img class="newImg" src="image/1.jpg" alt="" /></a>
<h3>冬奥生活抵达韩国</h3>
</div>
<div class="divTab" id="tab_2" style="display: none;">
<a href="#"><img class="newImg" src="image/2.jpg" alt="" /></a>
<h3>小贝突袭球场切磋球技 与“迷弟”大玩自拍无架子</h3>
</div>
<div class="divTab" id="tab_3" style="display: none;">
<a href="#"><img class="newImg" src="image/3.jpg" alt="" /></a>
<h3>欧冠小组赛 B 组：凯尔特人 Vs 拜仁慕尼黑</h3>
</div>
<div class="divTab" id="tab_4" style="display: none;">
<a href="#"><img class="newImg" src="image/4.jpg" alt="" /></a>
<h3>斯柯达文化之旅-上</h3>
</div>
<div class="divTab" id="tab_5" style="display: none;">
<a href="#"><img class="newImg" src="image/5.jpg" alt="" /></a>
<h3>枪声四起，武警官兵中原腹地上演“枪王争霸”</h3>
</div>
<div class="divTab" id="tab_6" style="display: none;">
<a href="#"><img class="newImg" src="image/6.jpg" alt="" /></a>
<h3>去年万圣节吓哭同学的小女孩</h3>
</div>
<div class="divTab" id="tab_7" style="display: none;">
<a href="#"><img class="newImg" src="image/7.jpg" alt="" /></a>
<h3>《绝地求生：大逃杀》中国活跃玩家数量达 600 万</h3>
</div>
<div class="divTab" id="tab_8" style="display: none;">
<a href="#"><img class="newImg" src="image/8.jpg" alt="" /></a>
<h3>iPhone X 真机刘海出现瑕疵</h3>
</div>
</div>
</div>
</body>
</html>
结果展示
