首页 > web前端 > js教程 > JS实现Tab选项卡切换效果的示例代码

JS实现Tab选项卡切换效果的示例代码

黄舟
发布: 2017-10-21 09:58:39
原创
2568 人浏览过

html部分


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <link rel="stylesheet" href="tab.css">

  <script src="tab.js"></script>

  <title>Document</title>

</head>

<body>

  <p id="tab">

    <p id="tab-nav" class="tab-nav">

      <ul>

        <li class="active"><a href="#">公告</a></li>

        <li><a href="#">规则</a></li>

        <li><a href="#">论坛</a></li>

        <li><a href="#">安全</a></li>

        <li><a href="#">公益</a></li>

      </ul>

    </p>

    <p id="tab-contain">

      <p class="mod">

        <ul>

          <li><a href="#">走进无声课堂</a></li>

          <li><a href="#">淘宝之行大众评审</a></li>

          <li><a href="#">爱心品牌联合征集</a></li>

          <li><a href="#">公益机构淘宝攻略</a></li>

        </ul>

      </p>

      <p class="mod" style="display:none">

        <ul>

          <li><a href="#">[聚焦]金牌卖家再启航</a></li>

          <li><a href="#">[功能]橱柜规则升级啦</a></li>

          <li><a href="#">[话题]又爱又恨优惠券</a></li>

          <li><a href="#">[工具] 购后送店铺红包</a></li>

        </ul>

      </p>

      <p class="mod" style="display:none">

        <ul>

          <li><a href="#">张勇:要玩快乐足球</a></li>

          <li><a href="">阿里2000万驰援灾区</a></li>

          <li><a href="">旅游宝让你边玩</a></li>

          <li><a href="">多行跟进阿里信用贷款</a></li>

        </ul>

      </p>

      <p class="mod" style="display:none">

        <ul>

          <li><a href="">[通知] “泛滥换新”</a></li>

          <li><a href="">[通知]“比特币严管”</a></li>

          <li><a href="">[通知]“禁发商品”</a></li>

          <li><a href="">[通知]“商品属性”</a></li>

        </ul>

      </p>

      <p class="mod" style="display:none">

        <ul>

          <li><a href="#">走进无声课堂</a></li>

          <li><a href="#">淘宝之行大众评审</a></li>

          <li><a href="#">爱心品牌联合征集</a></li>

          <li><a href="#">公益机构淘宝攻略</a></li>

        </ul>

      </p>

    </p>

  </p>

</body>

</html>

登录后复制

css部分


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

*{

 padding:0px;

 margin:0px;

 list-style: none;

 font-size: 14px;

}

#tab{

 width:298px;

 height:120px;

 margin:10px;

 border:1px solid #eee;

 overflow: hidden;

}

.tab-nav{

 width:400px;

 position:relative;

 height:27px;

 

}

.tab-nav ul{

 position:absolute;

 width:301px;

 left:-1px;

 background-color: #f7f7f7;

}

.tab-nav li{

 float:left;

 width:58px;

 padding: 0 1px;

 height:36px;

 background-color: #f7f7f7;

 border-bottom: 1px solid #eee;

 text-align: center;

}

.tab-nav li.active{

 background-color: #fff;

 border-bottom-color:#fff;

 border-left: 1px solid #eee;

 border-right: 1px solid #eee;

 padding:0px;

 font-weight: bolder;

}

li a:link,li a:visited{

 text-decoration: none;

 color:#000;

}

#tab-contain .mod{

 margin:25px 6px 10px 6px;

}

#tab-contain .mod ul li{

 float: left;

 width:143px;

 height:25px;

 overflow: hidden;

}

登录后复制

Js部分


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

function $(id){

 return typeof id===&#39;string&#39;?document.getElementById(id):id;

}

window.onload=function(){

 var navs=$(&#39;tab-nav&#39;).getElementsByTagName(&#39;li&#39;);

 var ps=$(&#39;tab-contain&#39;).getElementsByTagName(&#39;p&#39;);

 // alert(ps.length);

 if(navs.length!=ps.length){

  return;

 }

 for(var i=0;i<navs.length;i++){

  navs[i].title=i;

  navs[i].onmouseover=function(){

   for(var j=0;j<navs.length;j++){

    navs[j].className="";

    ps[j].style.display="none";

 

   }

   this.className="active";

   ps[this.title].style.display="block";

  }

 }

 

}

登录后复制

以上是JS实现Tab选项卡切换效果的示例代码的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
怎么实现 JavaScript点与圆的位置关系
来自于 1970-01-01 08:00:00
0
0
0
JavaScript钩子函数是什么?
来自于 1970-01-01 08:00:00
0
0
0
c++ 调用javascript
来自于 1970-01-01 08:00:00
0
0
0
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板