JavaScript兑现mop新闻动态图
日期：2014-05-16 浏览次数：20417 次
JavaScript实现mop新闻动态图
<html>
<head>
<style type='text/css'>
*{margin:0;padding:0;border:0;}
#main{width:300px;height:300px;background-color:green}
#head{height:50px;background-color:red}
#head li{float:left;list-style:none;text-align:center;margin-right:3px;width:72px;line-height:50px;background-color:orange}
</style>
</head>
<body>
<div id='main'>
<div id='head'>
<ul>
<li id='tab1' onmouseover='show(1)' style='background-color:green'>新闻</li>
<li id='tab2' onmouseover='show(2)'>体育</li>
<li id='tab3' onmouseover='show(3)'>音乐</li>
<li id='tab4' onmouseover='show(4)'>娱乐</li>
</ul>
</div>
<div id='content'>
<p id='p1'>呵呵呵</p>
<p id='p2' style='display:none'>法克鱿</p>
<p id='p3' style='display:none'>史珍香</p>
<p id='p4' style='display:none'>欧码噶</p>
</div>
</div>
</body>
<script>
function show(n){
for(var i = 1; i<5 ; i++){
document.getElementById('tab'+i).style.backgroundColor = 'orange';
document.getElementById('p'+i).style.display = 'none';
}
document.getElementById('tab'+n).style.backgroundColor = 'green';
document.getElementById('p'+n).style.display = 'block';
}
</script>
</html>
<html>
<head>
<style type='text/css'>
*{margin:0;padding:0;border:0;}
#main{width:300px;height:300px;background-color:green}
#head{height:50px;background-color:red}
#head li{float:left;list-style:none;text-align:center;margin-right:3px;width:72px;line-height:50px;background-color:orange}
</style>
</head>
<body>
<div id='main'>
<div id='head'>
<ul>
<li id='tab1' onmouseover='show(1)' style='background-color:green'>新闻</li>
<li id='tab2' onmouseover='show(2)'>体育</li>
<li id='tab3' onmouseover='show(3)'>音乐</li>
<li id='tab4' onmouseover='show(4)'>娱乐</li>
</ul>
</div>
<div id='content'>
<p id='p1'>呵呵呵</p>
<p id='p2' style='display:none'>法克鱿</p>
<p id='p3' style='display:none'>史珍香</p>
<p id='p4' style='display:none'>欧码噶</p>
</div>
</div>
</body>
<script>
function show(n){
for(var i = 1; i<5 ; i++){
document.getElementById('tab'+i).style.backgroundColor = 'orange';
document.getElementById('p'+i).style.display = 'none';
}
document.getElementById('tab'+n).style.backgroundColor = 'green';
document.getElementById('p'+n).style.display = 'block';
}
</script>
</html>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
