利用 js 实现选项卡的特别效果的实例,需要的朋友可以参考一下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
- <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";
- }
来源: