前端html+css+js开发选项卡切换-自动附源码

效果图：

css代码：

1.  
   * {
2.  
   margin: 0;
3.  
   padding: 0;
4.  
   font-size: 12px;
5.  
   font-family: "微软雅黑";
6.  
   color: #3c3c3c;
7.  
   text-decoration: none;
8.  
   list-style-type:none;
9.  
   }
10.  
    #tab_list {
11.  
    width: 275px;
12.  
    height: 190px;
13.  
    margin: 30px auto;
14.  
    }
15.  
    #list {
16.  
    height: 32px;
17.  
    border-bottom: 2px solid aqua;
18.  
    }
19.  
    #list li {
20.  
    display: inline-block;
21.  
    width: 60px;
22.  
    border-bottom: 1px solid aquamarine;
23.  
    }
24.  
    #list .active {
25.  
    border-top: 2px solid #0000FF;
26.  
    border-bottom: 2px solid aquamarine;
27.  
    }
28.  
    #tab_list div {
29.  
    border: 1px solid #FF5000;
30.  
    border-top: none;
31.  
    }
32.  
    #tab_list div li {
33.  
    height: 30px;
34.  
    line-height: 30px;
35.  
    text-indent: 8px;
36.  
    }
37.  
    #tab_list .show {
38.  
    display: block;
39.  
    }
40.  
    #tab_list .hidden {
41.  
    display: none;
42.  
    }

html代码：

1.  
   <div id="tab_list">
2.  
   <ul id="list">
3.  
   <li class="active">选项一</li>
4.  
   <li>选项二</li>
5.  
   <li>选项三</li>
6.  
   </ul>
7.  
   <div class="show">
8.  
   <ul>
9.  
   <li><a href="javascript:;">选项一内容-1</a></li>
10.  
    <li><a href="javascript:;">选项一内容-2</a></li>
11.  
    <li><a href="javascript:;">选项一内容-3</a></li>
12.  
    <li><a href="javascript:;">选项一内容-4</a></li>
13.  
    </ul>
14.  
    </div>
15.  
    <div class="hidden">
16.  
    <ul>
17.  
    <li><a href="javascript:;">选项二内容-1</a></li>
18.  
    <li><a href="javascript:;">选项二内容-2</a></li>
19.  
    <li><a href="javascript:;">选项二内容-3</a></li>
20.  
    <li><a href="javascript:;">选项二内容-4</a></li>
21.  
    </ul>
22.  
    </div>
23.  
    <div class="hidden">
24.  
    <ul>
25.  
    <li><a href="javascript:;">选项三内容-1</a></li>
26.  
    <li><a href="javascript:;">选项三内容-2</a></li>
27.  
    <li><a href="javascript:;">选项三内容-3</a></li>
28.  
    <li><a href="javascript:;">选项三内容-4</a></li>
29.  
    </ul>
30.  
    </div>
31.  
    </div>

js代码：

1.  
   window.onload = function() {
2.  
   var tab = document.getElementById("tab_list");
3.  
   var list = document.getElementById("list").getElementsByTagName("li");
4.  
   var div = document.getElementById("tab_list").getElementsByTagName("div");
5.  
   var timer = null;
6.  
   var index = 0;
7.  
   for (var i=0; i<list.length; i ) {
8.  
   list[i].num = i;
9.  
   list[i].onmouSEO（(Search Engine Optimization)）ver = function () {
10.  
    Change(this.num);
11.  
    }
12.  
    }
13.  
     
14.  
    function Change(curIndex) {
15.  
    for (var i=0; i<list.length; i ) {
16.  
    list[i].className = "";
17.  
    div[i].className = "hidden";
18.  
    }
19.  
    list[curIndex].className = "active";
20.  
    div[curIndex].className = "show";
21.  
    index = curIndex;
22.  
    }
23.  
     
24.  
    //自动播放
25.  
    function autoPlay() {
26.  
    timer = setInterval(function () {
27.  
    index ;
28.  
    if (index > list.length-1) {
29.  
    index = 0;
30.  
    }
31.  
    Change(index);
32.  
    },2000);
33.  
    }
34.  
     
35.  
    autoPlay();
36.  
    tab.onmouSEO（(Search Engine Optimization)）ver = function () {
37.  
    clearInterval(timer);
38.  
    }
39.  
    tab.onmouSEO（(Search Engine Optimization)）ut = function () {
40.  
    autoPlay();
41.  
    }
42.  
    }

这篇好文章是转载于：学新通技术网