这篇文章主要介绍了基于 JavaScript 实现 Tabs 选项卡切换效果, 具有一定的参考价值,感兴趣的小伙伴们可以参考一下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
- <!DOCTYPE html>
- <html>
- <head lang="en">
- <meta charset="UTF-8">
- <title>
- </title>
- <style>
- * { padding: 0; margin: 0; } .box { width: 500px; height: 400px; border:
- 1px solid #ccc; margin: 100px auto; overflow: hidden; } ul { width: 600px;
- height: 40px; margin-left: -1px; list-style: none; } li { float: left;
- width: 101px; height: 40px; text-align: center; font: 600 18px/40px "simsun";
- background-color: pink; cursor: pointer; } span { display: none; width:
- 500px; height: 360px; background-color: yellow; text-align: center; font:
- 700 150px/360px "simsun"; } .show { display: block; } .current { background-color:
- yellow; }
- </style>
- <script>
- window.onload = function() {
- var boxArr = document.getElementsByClassName("box");
- for (var i = 0; i < boxArr.length; i++) {
- fn(boxArr[i]);
- }
- function fn(ele) {
- var liArr = ele.getElementsByTagName("li");
- var spanArr = ele.getElementsByTagName("span");
- for (var i = 0; i < liArr.length; i++) {
- liArr[i].index = i;
- liArr[i].onmouseover = function() {
- for (var j = 0; j < liArr.length; j++) {
- liArr[j].className = "";
- spanArr[j].className = "";
- }
- this.className = "current";
- spanArr[this.index].className = "show";
- }
- }
- }
- }
- </script>
- </head>
- <body>
- <div class="box">
- <ul>
- <li class="current">
- 鞋子
- </li>
- <li>
- 袜子
- </li>
- <li>
- 帽子
- </li>
- <li>
- 裤子
- </li>
- <li>
- 裙子
- </li>
- </ul>
- <span class="show">
- 鞋子
- </span>
- <span>
- 袜子
- </span>
- <span>
- 帽子
- </span>
- <span>
- 裤子
- </span>
- <span>
- 裙子
- </span>
- </div>
- <div class="box">
- <ul>
- <li class="current">
- 鞋子
- </li>
- <li>
- 袜子
- </li>
- <li>
- 帽子
- </li>
- <li>
- 裤子
- </li>
- <li>
- 裙子
- </li>
- </ul>
- <span class="show">
- 鞋子
- </span>
- <span>
- 袜子
- </span>
- <span>
- 帽子
- </span>
- <span>
- 裤子
- </span>
- <span>
- 裙子
- </span>
- </div>
- <div class="box">
- <ul>
- <li class="current">
- 鞋子
- </li>
- <li>
- 袜子
- </li>
- <li>
- 帽子
- </li>
- <li>
- 裤子
- </li>
- <li>
- 裙子
- </li>
- </ul>
- <span class="show">
- 鞋子
- </span>
- <span>
- 袜子
- </span>
- <span>
- 帽子
- </span>
- <span>
- 裤子
- </span>
- <span>
- 裙子
- </span>
- </div>
- </body>
- </html>
来源: http://www.phperz.com/article/17/0514/330209.html