前端开发tab选项卡切换各种解决方案

前端开发软件ide|web前端开发与软件测试|前端开发的职业道德要求

tab切换,做前端的各位大神再熟悉不过,因为运用的场合太多,所以大家可能都不屑于去关心了。不晓得大家遇到这种时是自己马上梳理逻辑写一次呢,还是用已有的模板或自己的库,今天我对自己遇到的情况做了一下总结,对以下几点做了优化。
a,三个写法可根据具体页面使用环境而选择。
b,结构层、表现层、行为层的分离
c,结构层标签选择不受限。
d,对函数传参以避免一个页面多个tab切换行为与样式的相互干扰

1,调用JQ库

 **结构层:**

<容器 id=”容器id”>
<按钮容器 class=”tab1″>
<包含标签><按钮 class=”焦点按钮 class”> …</按钮 ></包含标签>
<包含标签><按钮 > …</按钮 ></包含标签>
</按钮容器>
<内容容器 class=”tab_con”>
<内容标签>…</内容标签>
<内容标签 class=”hidden”>…</内容标签>
</内容容器 >
</容器 >

行为层:
tab_switch1(容器id,焦点菜单class);

html 代码

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
    <title>tab选项卡的不同写法</title>
    <script src=”http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js”></script>
    <style>
        body,
        div,
        ul,
        li {
            margin: 0;
            padding: 0;
            list-style: none;
            font: 14px/30px arial, “微软雅黑”;
        }
        a {
            text-decoration: none;
        }
        .tab_a {
            width: 600px;
            height: auto;
            margin: 20px auto;
        }
        .tab_a .tab1ys {
            width: 100%;
            height: 50px;
        }
        .tab_a .tab1ys li {
            width: 200px;
            float: left;
        }
        .tab_a .tab1ys li a {
            width: 100%;
            height: 100%;
            border: 1px solid #666;
            border-right: none;
            line-height: 50px;
            font-size: 14px;
            color: #000;
            text-align: center;
            display: block
        }
        .tab_a .tab1ys li:last-child a {
            border-right: 1px solid #666;
        }
        .tab_a .tab1ys li a.active {
            background: #333;
            color: #CCC;
        }
        .tab_a .tabcon_sy {
            width: 100%;
            height: 300px;
            border: 1px solid #666;
            border-top: none;
            overflow: hidden;
        }
        .tab_a .tabcon_sy li {
            width: 94%;
            height: 100%;
            padding: 15px 3%;
        }
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
    <div class=”tab_a” id=”tab_a”>
        <h2>jquery写法</h2>
        <ul class=”tab1 tab1ys”>
            <li>
                <a class=”active” href=”javascript:void(0)”>选项卡1</a>
            </li>
            <li>
                <a href=”javascript:void(0)”>选项卡2</a>
            </li>
            <li>
                <a href=”javascript:void(0)”>选项卡3</a>
            </li>
        </ul>
        <ul class=”tab_con tabcon_sy”>
            <li>选项卡1的内容</li>
            <li class=”hidden”>选项卡2的内容</li>
            <li class=”hidden”>选项卡3的内容</li>
        </ul>
    </div>
    <script>
        //jquery写法
        function tab_switch1(ele_id, activeclass) {
            $(“#” + ele_id + “>.tab1”).children().each(function () {
                var xh = $(this).index();
                $(this).find(“*”).click(function () {
                    $(this).addClass(activeclass);
                    $(this).parent().siblings().find(“*”).removeClass(activeclass);
                    $(“#” + ele_id + “>.tab_con”).find(“*”).addClass(“hidden”);
                    //alert(xh);
                    $(“#” + ele_id + “>.tab_con”).find(“*”).eq(xh).removeClass(“hidden”);
                })
            });
        }
        //根据ID调用菜单切换函数
        tab_switch1(“tab_a”, “active”);
    </script>
</body>
</html>

2,纯js(通过容器ID传参)

 **结构层:**

<容器 id=”容器id”>
<按钮容器 class=”tab1″>
<包含标签><按钮 class=”焦点按钮 class”> …</按钮 ></包含标签>
<包含标签><按钮 > …</按钮 ></包含标签>
</按钮容器>
<内容容器 class=”tab_con”>
<内容标签>…</内容标签>
<内容标签 class=”hidden”>…</内容标签>
</内容容器 >
</容器 >

行为层:
tab_switch2(容器id,焦点菜单class);

html 代码

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
    <title>tab选项卡的不同写法</title>
    <script src=”http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js”></script>
    <style>
        body,
        div,
        ul,
        li {
            margin: 0;
            padding: 0;
            list-style: none;
            font: 14px/30px arial, “微软雅黑”;
        }
        a {
            text-decoration: none;
        }
        .tab_a {
            width: 600px;
            height: auto;
            margin: 20px auto;
        }
        .tab_a .tab1ys {
            width: 100%;
            height: 50px;
        }
        .tab_a .tab1ys li {
            width: 200px;
            float: left;
        }
        .tab_a .tab1ys li a {
            width: 100%;
            height: 100%;
            border: 1px solid #666;
            border-right: none;
            line-height: 50px;
            font-size: 14px;
            color: #000;
            text-align: center;
            display: block
        }
        .tab_a .tab1ys li:last-child a {
            border-right: 1px solid #666;
        }
        .tab_a .tab1ys li a.active {
            background: #333;
            color: #CCC;
        }
        .tab_a .tabcon_sy {
            width: 100%;
            height: 300px;
            border: 1px solid #666;
            border-top: none;
            overflow: hidden;
        }
        .tab_a .tabcon_sy li {
            width: 94%;
            height: 100%;
            padding: 15px 3%;
        }
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
    <div class=”tab_a” id=”tab_b”>
        <h2>纯js写法(通过容器id传参给函数)</h2>
        <ul class=”tab1 tab1ys”>
            <li>
                <a class=”active” href=”javascript:void(0)”>选项卡1</a>
            </li>
            <li>
                <a href=”javascript:void(0)”>选项卡2</a>
            </li>
            <li>
                <a href=”javascript:void(0)”>选项卡3</a>
            </li>
        </ul>
        <ul class=”tab_con tabcon_sy”>
            <li>选项卡1的内容</li>
            <li class=”hidden”>选项卡2的内容</li>
            <li class=”hidden”>选项卡3的内容</li>
        </ul>
    </div>
    <script>
        //纯js写法
        function tab_switch2(ele_id, activeclass) {
            var contain = document.getElementById(ele_id);
            var tab_tit = contain.querySelectorAll(“.tab1>*”);
            var tab_con = contain.querySelectorAll(“.tab_con>*”);
            var tab_num = tab_tit.length;
            var con_num = tab_con.length;
            for (i = 0; i < tab_num; i++) {
                tab_tit[i].onclick = (function (i) {
                    return function () {
                        for (j = 0; j < con_num; j++) {
                            if (i == j) {
                                tab_tit[j].firstChild.className = activeclass;
                                tab_con[j].className = “”;
                            }
                            else {
                                tab_tit[j].firstChild.className = “”;
                                tab_con[j].className = “hidden”;
                            }
                        }
                    }
                })(i);
            }
        }
        tab_switch2(“tab_b”, “active”);
    </script>
</body>
</html>

3,纯js(点击按钮调用函数)

 **结构/行为层:**

<容器>
<按钮容器 id=”按钮容器ID”>
<包含标签><按钮 class=”焦点按钮class” onclick=”tab_switch3(按钮容器ID,内容容器ID,焦点按钮class,序号)”> …</按钮 ></包含标签>
<包含标签><按钮 onclick=”tab_switch3(按钮容器ID,内容容器ID,焦点按钮class,序号)”> …</按钮 ></包含标签>
</按钮容器>
<内容容器 id=”内容容器ID”>
<内容标签>…</内容标签>
<内容标签 class=”hidden”>…</内容标签>
</内容容器 >
</容器 >

html 代码

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
    <title>tab选项卡的不同写法</title>
    <script src=”http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js”></script>
    <style>
        body,
        div,
        ul,
        li {
            margin: 0;
            padding: 0;
            list-style: none;
            font: 14px/30px arial, “微软雅黑”;
        }
        a {
            text-decoration: none;
        }
        .tab_a {
            width: 600px;
            height: auto;
            margin: 20px auto;
        }
        .tab_a .tab1ys {
            width: 100%;
            height: 50px;
        }
        .tab_a .tab1ys li {
            width: 200px;
            float: left;
        }
        .tab_a .tab1ys li a {
            width: 100%;
            height: 100%;
            border: 1px solid #666;
            border-right: none;
            line-height: 50px;
            font-size: 14px;
            color: #000;
            text-align: center;
            display: block
        }
        .tab_a .tab1ys li:last-child a {
            border-right: 1px solid #666;
        }
        .tab_a .tab1ys li a.active {
            background: #333;
            color: #CCC;
        }
        .tab_a .tabcon_sy {
            width: 100%;
            height: 300px;
            border: 1px solid #666;
            border-top: none;
            overflow: hidden;
        }
        .tab_a .tabcon_sy li {
            width: 94%;
            height: 100%;
            padding: 15px 3%;
        }
        .hidden {
            display: none;
        }
    </style>
</head>
</p>
<p>
    <body>
        <div id=”tab_c” class=”tab_a”>
            <h2>纯js写法(点击按钮调用函数)</h2>
            <ul class=”tab1 tab1ys” id=”tab3″>
                <li>
                    <a class=”active” href=”javascript:void(0)” onclick=”tab_switch3(‘tab3′,’tab_con3′,’active’,0)”>选项卡1</a>
                </li>
                <li>
                    <a href=”javascript:void(0)” onclick=”tab_switch3(‘tab3′,’tab_con3′,’active’,1)”>选项卡2</a>
                </li>
                <li>
                    <a href=”javascript:void(0)” onclick=”tab_switch3(‘tab3′,’tab_con3′,’active’,2)”>选项卡3</a>
                </li>
            </ul>
            <ul class=”tab_con tabcon_sy” id=”tab_con3″>
                <li>选项卡1的内容</li>
                <li class=”hidden”>选项卡2的内容</li>
                <li class=”hidden”>选项卡3的内容</li>
            </ul>
        </div>
        <script>
            //纯js写法
            function tab_switch3(tit_id, con_id, activeclass, this_num) {
                //var contain=document.getElementById(ele_id);
                var tab_tit = document.getElementById(tit_id);
                var tab_con = document.getElementById(con_id);
                var cccc = tab_tit.children;
                var dddd = tab_con.children;
                var tab_num1 = cccc.length;
                //alert(tab_num1);
                for (i = 0; i < tab_num1; i++) {
                    cccc[i].firstChild.className = “”;
                    dddd[i].className = “hidden”;
                }
                cccc[this_num].firstChild.className = activeclass;
                dddd[this_num].className = “”;
            }
        </script>
    </body>
</html>

前端开发调试方法|好用的前端开发软件|好用的前端开发软件

» 本文来自:前端开发者 » 《前端开发tab选项卡切换各种解决方案》
» 本文链接地址:https://www.rokub.com/4989.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!