Fork me on GitHub

李可

导航

统计

Jquery&JS简单选项卡

回到顶部

结果，如图

为了明显，用绿色+红色

回到顶部

第一步：静态布局

先写html代码和css样式

要点一：  ul li都为块级元素，可以用height，但是里面字体不居中，我们用line-height，即达到居中，又设定行高。

要点二：ul的高度与要显示的选项li的高度相等，因为li要把ul的底边掩盖掉。其他不显示的li的行高设置ul的高度-1，留出1个像素的底边显示。

?
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
    <style type="text/css">
    *{margin:0; padding:0; font:12px/1.5 arial;}
    li{list-style:none;}
    .wrap{width:800px; margin:20px auto;}
    .hide{display:none;}
    #tab-title{height:25px;border-bottom:1px solid #ccc; background:red;}/*#ccc*/
    #tab-title li{line-height:24px; float:left; width:80px; margin:0 4px; text-align:center; border:1px solid #ccc; border-bottom:none; background:green; cursor:pointer}/*#f5f5f5; */
    #tab-title .active{ line-height:25px;background:#fff;}
    #tab-content{border:1px solid #ccc; border-top:none; padding:20px;}
    </style>
 
 
<body>
    <div class="wrap">
        <ul id="tab-title">
            <li class="active">选项1</li>
            <li>选项2</li>
            <li>选项3</li>
            <li>选项4</li>
        </ul>
        <div id="tab-content">
            <div>
                内容1</div>
            <div class="hide">
                内容2</div>
            <div class="hide">
                内容3</div>
            <div class="hide">
                内容4</div>
        </div>
    </div>
</body>
回到顶部

　第二步：切换

要点一，页面加载时，给选项卡加一个额外的“索引”属性并赋值，以做选项卡和内容的对应。方法是.index=值。

要点二，点击选项时，利用jQuery链式编程，选项：去掉所有li的的active类样式，再为点击的li加上active类样式。内容：所有div加上hide类样式，再为点击的div去掉hide类样式。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        var tabtitleEle, tabContentEle;
        tabtitleEle = $("#tab-title li");
        tabContentEle = $("#tab-content div");
        for (var i = 0; i < tabtitleEle.length; i++) {
            tabtitleEle[i].index = i;//加上一个属性
            tabtitleEle.eq(i).click(function () {
                tabtitleEle.removeClass("active").eq(this.index).addClass("active");
              //alert(this.index);
                tabContentEle.addClass("hide").eq(this.index).removeClass("hide");
            })
        }
    })
 
</script>
回到顶部

　纯js的写法

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
window.onload = function () {
    var tab_t = document.getElementById("tab-title");
    var tab_t_li = tab_t.getElementsByTagName("li");
    var tab_c = document.getElementById("tab-content");
    var tab_c_li = tab_c.getElementsByTagName("div");
    var len = tab_t_li.length;
    var i = 0;
 
    for (i = 0; i < len; i++) {
        tab_t_li[i].index = i;
        tab_t_li[i].onclick = function () {
            for (i = 0; i < len; i++) {
                tab_t_li[i].className = '';
                tab_c_li[i].className = 'hide';
            }
            tab_t_li[this.index].className = 'active';
            tab_c_li[this.index].className = '';
        }
    }
}
回到顶部

　全部代码

?
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
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
    *{margin:0; padding:0; font:12px/1.5 arial;}
    li{list-style:none;}
    .wrap{width:800px; margin:20px auto;}
    .hide{display:none;}
    #tab-title{height:25px;border-bottom:1px solid #ccc; background:red;}/*#ccc*/
    #tab-title li{line-height:24px; float:left; width:80px; margin:0 4px; text-align:center; border:1px solid #ccc; border-bottom:none; background:green; cursor:pointer}/*#f5f5f5; */
    #tab-title .active{ line-height:25px;background:#fff;}
    #tab-content{border:1px solid #ccc; border-top:none; padding:20px;}
    </style>
    <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            var tabtitleEle, tabContentEle;
            tabtitleEle = $("#tab-title li");
            tabContentEle = $("#tab-content div");
            for (var i = 0; i < tabtitleEle.length; i++) {
                tabtitleEle[i].index = i;//加上一个属性
                tabtitleEle.eq(i).click(function () {
                    tabtitleEle.removeClass("active").eq(this.index).addClass("active");
                  //alert(this.index);
                    tabContentEle.addClass("hide").eq(this.index).removeClass("hide");
                })
            }
        })
     
    </script>
    <!--<script>
        window.onload = function () {
            var tab_t = document.getElementById("tab-title");
            var tab_t_li = tab_t.getElementsByTagName("li");
            var tab_c = document.getElementById("tab-content");
            var tab_c_li = tab_c.getElementsByTagName("div");
            var len = tab_t_li.length;
            var i = 0;
 
            for (i = 0; i < len; i++) {
                tab_t_li[i].index = i;
                tab_t_li[i].onclick = function () {
                    for (i = 0; i < len; i++) {
                        tab_t_li[i].className = '';
                        tab_c_li[i].className = 'hide';
                    }
                    tab_t_li[this.index].className = 'active';
                    tab_c_li[this.index].className = '';
                }
            }
        }
    </script>-->
</head>
<body>
    <div class="wrap">
        <ul id="tab-title">
            <li class="active">选项1</li>
            <li>选项2</li>
            <li>选项3</li>
            <li>选项4</li>
        </ul>
        <div id="tab-content">
            <div>
                内容1</div>
            <div class="hide">
                内容2</div>
            <div class="hide">
                内容3</div>
            <div class="hide">
                内容4</div>
        </div>
    </div>
</body>
</html>

　　

　

　

 

posted on   李可在江湖  阅读(496)  评论(0)  编辑  收藏  举报

编辑推荐：
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
阅读排行：
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试？测试工程师会被淘汰吗？
点击右上角即可分享
微信分享提示
AI IDE Trae