与图片切换类似，相对更简单一些
多中求异思想：把所有的导航对应的正文内容隐藏（display：none），当点击导航时显示对应的内容（display：block）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab view</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
#d1{
border:1px solid red;
width: 500px;
height: 300px;
}
ul{
height: 50px;
}
ul li{
list-style: none;
float: left;
width:98px;
height: 50px;
text-align: center;
line-height: 50px;
border:1px solid blue;
}
#div1,#div2,#div3,#div4{
display: none;
}
#div1{
display: block;
}
</style>
<script type="text/javascript">
function showdiv(n,m){
//所有div内容隐藏
for(var i=1;i<=4;i++){
var allobj=document.getElementById("div"+i);
allobj.style.display="none";
var allli=document.getElementById("li"+i);
allli.style.border="1px solid red";
}
var obj=document.getElementById("div"+n);
obj.style.display="block";
m.style.borderBottom="1px solid white";
}
</script>
</head>
<body>
<div id="d1">
<ul>
<li id="li1" οnmοuseοver="showdiv(1,this)">国际新闻</li>
<li id="li2" οnmοuseοver="showdiv(2,this)">国内新闻</li>
<li id="li3" οnmοuseοver="showdiv(3,this)">体育新闻</li>
<li id="li4" οnmοuseοver="showdiv(4,this)">娱乐新闻</li>
<li></li>
</ul>
<div id="div1">
国际新闻<br/>
哈哈哈哈哈哈哈哈哈哈啊哈<br/>
呵呵呵呵呵呵呵呵呵额和和<br/>
</div>
<div id="div2">
国内新闻<br/>
uhuhuhuhuhuhuhuhuhuhuhuh<br/>
hthththhthththththththht<br/>
</div>
<div id="div3">
体育新闻<br/>
hhhhhhhhhhhhhhhhhhhhhhh<br/>
ttttttttttttttttttttttt<br/>
</div>
<div id="div4">
娱乐新闻<br/>
aaaaaaaaaaaaaaaaaaaaaa<br/>
bbbbbbbbbbbbbbbbbbbbbb<br/>
</div>
</div>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
