利用js实现选项卡的特别效果的实例

复制代码代码如下:<html><head> <meta charset="utf-8"/> <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;height:50px;width:72px;text-align:center;line-height:50px;background-color:orange;margin-right:3px} </style></head><body> <div id="main"> <div id="head"> <ul> <li id="tab1" onclick="show(1)" style="background-color:green">新闻</li> <li id="tab2" onclick="show(2)">体育</li> <li id="tab3" onclick="show(3)">音乐</li> <li id="tab4" onclick="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">江南style</p> <p id="p4" style="display:none">赵本山退出春晚</p> </div> </div></body> <script> function show(n){ for(var i=1;i<=4;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>

　　推荐阅读

　　在图片上显示左右箭头类似翻页的代码

使用JS实现在图片上显示左右箭头的翻页代码，预览效果网址：http://www.keleyi.com/keleyi/phtml/picnext/ 本实例使用了javascript的onmousemove 事件。onmousemove 事件会在鼠标指针移动时发生。语法 onmousemov>>>详细阅读

本文标题：利用js实现选项卡的特别效果的实例

地址：http://www.17bianji.com/kaifa2/JS/22306.html

1/2 1