这个也是一种，底部带文字
用到了隐藏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
a{
text-decoration: none;
color: black;
}
li{
display: block;
border: 1px gray solid;
float: left;
padding: 5px;
padding-left: 17px;
padding-right: 17px;
font-family: "微软雅黑";
border-bottom: none;
}
img{
float: left;
position: absolute;
left: 48px;
top:50px ;
}
p{
position: absolute;
left: 165px;
top: 280px;
}
</style>
</head>
<body>
<ul>
<span><li><a href="#" onclick="aa(1)">热点</a></li></span>
<span><li><a href="#" onclick="aa(2)">聚焦</a></li></span>
<span><li><a href="#" onclick="aa(3)">天下</a></li></span>
<span><li><a href="#" onclick="aa(4)">奇闻</a></li></span>
<span><li><a href="#" onclick="aa(5)">军事</a></li></span>
<div id="a1">
<img src="img/1.jpg"/>
<p>法国大选</p>
</div>
<div id="a2">
<img src="img/2.jpg"/>
<p>121</p>
</div>
<div id="a3">
<img src="img/3.jpg"/>
<p>123123123</p>
</div>
<div id="a4">
<img src="img/4.jpg"/>
<p>12312312312</p>
</div>
<div id="a5">
<img src="img/5.jpg"/>
<p>213123123</p>
</div>
</ul>
<script type="text/javascript">
var a=document.getElementsByTagName("div");
for(i=1;i<a.length;i++)
a[i].style.display="none";
function aa(w){
for(i=0;i<a.length;i++)
a[i].style.display="none";
a[w-1].style.display="block";
}
</script>
</body>
</html>