预计效果
为了在网页布局有限的区域尽可能多地显示内容,很多网站在首页中普遍采用了选项卡和标签页相结合的内容显示方式。
效果如下图
当鼠标移动到娱乐的标签上,页面变为如下图
代码
完整代码和需要图片可在我的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(