这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本篇文章主要分享了 js 封装 tab 标签页的示例代码,具有很好的参考价值,需要的朋友一起来看下吧
话不多说,请看代码
- <html>
- <head>
- <title>
- </title>
- <meta charset="UTF-8">
- <style>
- *{ padding:0; margin:0;} .block{ display:block;} .none{ display:none;}
- #wrap,#wraps{ width:500px; height:230px; overflow:hidden; margin:50px auto;}
- #tab1,#tab2{ list-style:none;} #tab1 li,#tab2 li{ width:66px; height:28px;
- border:1px solid #09C; text-align:center; line-height:28px; float:left;
- cursor:pointer; margin-right:3px;} #tab2 li:hover{ background:#CCC;} #tab1
- li.on,#tab2 li.on{ background:#9C3;} #wrap div,#wraps div{ width:498px;
- height:198px; border:1px solid #000;}
- </style>
- </head>
- <body>
- <div id="wrap">
- <ul id="tab1">
- <li class="on">
- 第一项
- </li>
- <li>
- 第二项
- </li>
- <li>
- 第三项
- </li>
- </ul>
- <br clear="all" />
- <div class="block">
- 第一部分
- </div>
- <div class="none">
- 第二部分
- </div>
- <div class="none">
- 第三部分
- </div>
- </div>
- <div id="wraps">
- <ul id="tab2">
- <li class="on">
- 第一项
- </li>
- <li>
- 第二项
- </li>
- <li>
- 第三项
- </li>
- </ul>
- <br clear="all" />
- <div class="block">
- 第一部分
- </div>
- <div class="none">
- 第二部分
- </div>
- <div class="none">
- 第三部分
- </div>
- </div>
- <script type="text/javascript">
- tab("wrap", "tab1", "mouseover") tab("wraps", "tab2");
- function tab(wrap, navul, eve) {
- //tab效果封装,目前只有两种变换方式,一种为点击事件click(也是默认事件),另外一种为鼠标移过事件mouseover
- var divs = document.getElementById(wrap).getElementsByTagName("div");
- var lis = document.getElementById(navul).getElementsByTagName("li");
- for (var i = 0; i < lis.length; i++) {
- lis[i].indx = i;
- if (eve == "click" || eve == null) {
- lis[i].onclick = function() {
- for (i = 0; i < lis.length; i++) {
- lis[i].className = "";
- divs[i].className = "none";
- this.className = "on";
- divs[this.indx].className = "block";
- }
- }
- } else if (eve == "mouseover") {
- lis[i].onmouseover = function() {
- for (i = 0; i < lis.length; i++) {
- lis[i].className = "";
- divs[i].className = "none";
- this.className = "on";
- divs[this.indx].className = "block";
- }
- }
- }
- }
- }
- </script>
- </body>
- </html>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持 phperz!
来源: http://www.phperz.com/article/17/0520/329399.html