1.tab浏览
标签式浏览：oumouseover事件，
页面的代码
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title> 开关练习</title>
<style type="text/css">
*{margin:0px;padding:0px;}
#d1{border:1px solid red;width:500px;height:300px; }
ul li{list-style:none; float:left; width:98px; height:50px; border:1px solid red; text-align:center;
line-height:50px; }
ul{ height:50px;}
#div1, #div2, #div3, #div4{display:none;}
#div1{display:block;}
</style>
<script type="text/javascript">
function showDiv(n,lobj){
for(var i=1;i<=4;i++){
var obj1=document.getElementById("div"+i);
var obj2=document.getElementById("li"+i);
obj1.style.display="none";
obj2.style.border="1px solid red";
}
var obj=document.getElementById("div"+n);
obj.style.display="block";
lobj.style.borderBottom="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>新闻国际新闻</
最低0.47元/天 解锁文章
2836
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
