利用js实现选项卡的特别效果的实例
2013-03-03 00:00
981 查看
<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实现选项卡的特别效果的实例
- 利用js实现选项卡的特别效果
- js实现选项卡效果(利用建立索引方式实现)
- 利用Three.js如何实现阴影效果实例代码
- 利用Js+Css实现折纸动态导航效果实例源码
- js实现仿Windows风格选项卡和按钮效果实例
- js实现仿Windows风格选项卡和按钮效果实例
- js实现选项卡效果(利用闭包方式)
- 原生JS实现选项卡效果实例
- JS基于面向对象实现的选项卡效果示例
- JS实现单击输入框弹出选择框效果完整实例
- 利用JS实现scroll自定义滚动效果详解
- js实现精美的图片跟随鼠标效果实例
- js实现选项卡内容切换以及折叠和展开效果【推荐】
- JS小功能(setInterval实现图片效果显示时间)实例代码
- JS+CSS实现自适应选项卡宽度的圆角滑动门效果
- JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
- js实现tab切换效果实例
- JS实现仿UC浏览器前进后退效果的实例代码
- 利用iscroll4实现轮播图效果实例代码