可重复使用Tab切换代码和纯js代码

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jQuery tab选项卡插件</title>
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <style type="text/css">
        *{ margin:0; padding:0;}
        body { font:12px/1.8 Arial; color:#666;}
        ul,li{ list-style:none;}
        .tab{ width:450px; margin:0 auto 50px;}
        .tab-hd { background:#F93; overflow:hidden; zoom:1;}
        .tab-hd li{ float:left; width:150px; color:#fff; text-align:center; cursor:pointer;}
        .tab-hd li.active{ background:#F60;}
        .tab-bd li{display:none; padding:20px; border:1px solid #ddd; border-top:0 none; font-size:24px;}
</style>
</head>
<body>
        <script type="text/javascript">
            $(function () {
                function tabs(tabTit, on, tabCon) {
                    $(tabCon).each(function () {
                        $(this).children().eq(0).show();
                    });
                    $(tabTit).each(function () {
                        $(this).children().eq(0).addClass(on);
                    });
                    $(tabTit).children().hover(function () {//鼠标“hover”的效果
                        $(this).addClass(on).siblings().removeClass(on);
                        var index = $(tabTit).children().index(this);
                        $(tabCon).children().eq(index).show().siblings().hide();
                    });
                }
                tabs(".tab-hd", "active", ".tab-bd");
                tabs(".tab-hd3", "active", ".tab-bd3");
            });
        </script>
        <script type="text/javascript">
            $(function () {
                function tabs(tabTit, on, tabCon) {
                    $(tabCon).each(function () {
                        $(this).children().eq(0).show();
                    });
                    $(tabTit).each(function () {
                        $(this).children().eq(0).addClass(on);
                    });
                    $(tabTit).children().click(function () {//鼠标“click”的效果
                        $(this).addClass(on).siblings().removeClass(on);
                        var index = $(tabTit).children().index(this);
                        $(tabCon).children().eq(index).show().siblings().hide();
                    });
                }
                tabs(".tab-hd2", "active", ".tab-bd2");
            });
        </script>
        <div class="tab">
            <ul class="tab-hd">
                <li>选项1</li><li>选项2</li><li>选项3</li></ul>
            <ul class="tab-bd">
                <li>内容1</li><li>内容2</li><li>内容3</li></ul>
        </div>
        <style type="text/css">
        .tab3{ width:450px; margin:0 auto 50px;}
        .tab-hd3 { background:#F93; overflow:hidden; zoom:1;}
        .tab-hd3 li{ float:left; width:150px; color:#fff; text-align:center; cursor:pointer;}
        .tab-hd3 li.active{ background:#F60;}
        .tab-bd3 li{display:none; padding:20px; border:1px solid #ddd; border-top:0 none; font-size:24px;}
</style>
        <div class="tab3">
            <ul class="tab-hd3">
                <li>选项4</li><li>选项5</li><li>选项6</li></ul>
            <ul class="tab-bd3">
                <li>内容4</li><li>内容5</li><li>内容6</li></ul>
        </div>
        <style>
        .tab2{ width:450px; margin:0 auto 50px;}
        .tab-hd2 { background:#F93; overflow:hidden; zoom:1;}
        .tab-hd2 li{ float:left; width:150px; color:#fff; text-align:center; cursor:pointer;}
        .tab-hd2 li.active{ background:#F60;}
        .tab-bd2 li{display:none; padding:20px; border:1px solid #ddd; border-top:0 none; font-size:24px;}
        </style>
        <div class="tab2">
            <ul class="tab-hd2">
                <li>点击效果1</li><li>选项2</li><li>选项3</li></ul>
            <ul class="tab-bd2">
                <li>内容1</li><li>内容2</li><li>内容3</li></ul>
        </div>
        <hr />
                                <h1>
                Tab选项卡标签，自动切换
                </h1>
<style type="text/css">
        *{margin: 0;padding: 0;}
        .dl_all{margin: 10px auto;width: 500px;line-height: 24px; border-left: 1px solid #dcdcdc; }
        .dt_nav{padding: 0 10px;float: left;border: 1px solid #dcdcdc;border-left: 0;cursor: pointer;margin-bottom: -1px;}
        .dt_nav.active{border-bottom: 1px solid #fff;}
        .navcon{clear: both;width: 100%;border-left: 0;border: 1px solid #dcdcdc;border-left: 0;display: none;}
    </style>
<script type="text/javascript">
        $(document).ready(function () {
            $('.nav:first').addClass('active');
            $('.navcon:first').css('display', 'block');
            autoroll();
            hookThumb();
        });
        var i = -1; //第i+1个tab开始
        var offset = 3000; //轮换时间
        var timer = null;
        function autoroll() {
            n = $('.dt_nav').length - 1;
            i++;
            if (i > n) {
                i = 0;
            }
            slide(i);
            timer = window.setTimeout(autoroll, offset);
        }
        function slide(i) {
            $('.dt_nav').eq(i).addClass('active').siblings().removeClass('active');
            $('.navcon').eq(i).css('display', 'block').siblings('.navcon').css('display', 'none');
        }
        function hookThumb() {
            $('.dt_nav').hover(function () {//鼠标事件，可换成“click”
                if (timer) {
                    clearTimeout(timer);
                    i = $(this).prevAll().length;
                    slide(i);
                }
            },
    function () {
        timer = window.setTimeout(autoroll, offset);
        this.blur();
        return false;
    });
        }
</script>
<dl class="dl_all">
                                <dt class="dt_nav">
                                        nav1
                                </dt>
                                <dt class="dt_nav">
                                        nav2
                                </dt>
                                <dt class="dt_nav">
                                        nav3
                                </dt>
                                <dd class="navcon">
                                        内容1
                                </dd>
                                <dd class="navcon">
                                        内容2
                                </dd>
                                <dd class="navcon">
                                        内容3
                                </dd>
                        </dl>
</body>
</html>

   提示：你可以先修改部分代码再运行。





        常用tab切换-原生js代码




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>常用tab切换</title>
    <style type="text/css">
#box{width:500px;font-size:12px}
#box ul{margin:0;padding:0;list-style:none}
#box #tab{height:25px;padding-left:10px;border-bottom:1px solid #AACBEE}
#box #tab li{width:80px;height:18px;padding-top:7px;margin-right:10px;text-align:center;float:left;background:#F3F8FD;cursor:pointer}
#box #tab li.on{width:78px;height:19px;padding-top:5px;border:1px solid #AACBEE;border-bottom:none;color:#00f;background:#E8F2F7;position:relative;top:1px}
#box #tab_con{border:1px solid #AACBEE;border-top:none;padding:20px}
#box #tab_con li{display:none}
#box #tab_con #tab_con_1{display:block;}
</style>
</head>
<body>
/*********1**********/
    <div id="box">
        <ul id="tab">
            <li class="on" id="tab_1" onclick="switchTab(1)">新闻</li>
            <li id="tab_2" onclick="switchTab(2)">财经</li>
            <li id="tab_3" onclick="switchTab(3)">娱乐</li>
            <li id="tab_4" onclick="switchTab(4)">娱乐</li>
        </ul>
        <ul id="tab_con">
            <li id="tab_con_1">新闻内容</li>
            <li id="tab_con_2">财经内容</li>
            <li id="tab_con_3">娱乐内容</li>
            <li id="tab_con_4">娱乐内容3</li>
        </ul>
    </div>
    <script type="text/javascript">
        function switchTab(n){
            for(var i = 1; i <= 4; i++){
                document.getElementById("tab_" + i).className = "";
                document.getElementById("tab_con_" + i).style.display = "none";
            }
            document.getElementById("tab_" + n).className = "on";
            document.getElementById("tab_con_" + n).style.display = "block";
        }
</script>
/*********2**********/
<style type="text/css">
#boxa{width:500px;font-size:12px}
#boxa ul{margin:0;padding:0;list-style:none}
#boxa #taba{height:25px;padding-left:10px;border-bottom:1px solid #AACBEE}
#boxa #taba li{width:80px;height:18px;padding-top:7px;margin-right:10px;text-align:center;float:left;background:#F3F8FD;cursor:pointer}
#boxa #taba li.on{width:78px;height:19px;padding-top:5px;border:1px solid #AACBEE;border-bottom:none;color:#00f;background:#E8F2F7;position:relative;top:1px}
#boxa #tab_cona{border:1px solid #AACBEE;border-top:none;padding:20px}
#boxa #tab_cona li{display:none}
#boxa #tab_cona #tab_cona_1{display:block;}
</style>
<div id="boxa">
        <ul id="taba">
            <li class="on" id="taba_1" onmouseover="switchTaba(1)">新闻</li>
            <li id="taba_2" onmouseover="switchTaba(2)">财经</li>
            <li id="taba_3" onmouseover="switchTaba(3)">娱乐</li>
            <li id="taba_4" onmouseover="switchTaba(4)">娱乐</li>
        </ul>
        <ul id="tab_cona">
            <li id="tab_cona_1">新闻内容</li>
            <li id="tab_cona_2">财经内容</li>
            <li id="tab_cona_3">娱乐内容</li>
            <li id="tab_cona_4">娱乐内容3</li>
        </ul>
    </div>
<script type="text/javascript">
        function switchTaba(n){
            for(var i = 1; i <= 4; i++){
                document.getElementById("taba_" + i).className = "";
                document.getElementById("tab_cona_" + i).style.display = "none";
            }
            document.getElementById("taba_" + n).className = "on";
            document.getElementById("tab_cona_" + n).style.display = "block";
        }
</script>
/*********3**********/
    <style type="text/css">
#boxy{width:500px;font-size:12px}
#boxy ul{margin:0;padding:0;list-style:none}
#boxy #taby{height:25px;padding-left:10px;border-bottom:1px solid #AACBEE}
#boxy #taby li{width:80px;height:18px;padding-top:7px;margin-right:10px;text-align:center;float:left;background:#F3F8FD;cursor:pointer}
#boxy #taby li.on{width:78px;height:19px;padding-top:5px;border:1px solid #AACBEE;border-bottom:none;color:#00f;background:#E8F2F7;position:relative;top:1px}
#boxy #tab_cony{border:1px solid #AACBEE;border-top:none;padding:20px}
#boxy #tab_cony li{display:none}
#boxy #tab_cony #tab_cony_1{display:block;}
</style>
    <div id="boxy">
        <ul id="taby">
            <li class="on" id="taby_1" onmouseover="switchTaby(1)">新闻</li>
            <li id="taby_2" onmouseover="switchTaby(2)">财经</li>
            <li id="taby_3" onmouseover="switchTaby(3)">娱乐</li>
            <li id="taby_4" onmouseover="switchTaby(4)">娱乐</li>
        </ul>
        <ul id="tab_cony">
            <li id="tab_cony_1">新闻内容</li>
            <li id="tab_cony_2">财经内容</li>
            <li id="tab_cony_3">娱乐内容</li>
            <li id="tab_cony_4">娱乐内容3</li>
        </ul>
    </div>
    <script type="text/javascript">
        function switchTaby(n){
            for(var i = 1; i <= 4; i++){
                document.getElementById("taby_" + i).className = "";
                document.getElementById("tab_cony_" + i).style.display = "none";
            }
            document.getElementById("taby_" + n).className = "on";
            document.getElementById("tab_cony_" + n).style.display = "block";
        }
</script>
/*********4**********/
    <style type="text/css">
#boxk{width:500px;font-size:12px}
#boxk ul{margin:0;padding:0;list-style:none}
#boxk #tabk{height:25px;padding-left:10px;border-bottom:1px solid #AACBEE}
#boxk #tabk li{width:80px;height:18px;padding-top:7px;margin-right:10px;text-align:center;float:left;background:#F3F8FD;cursor:pointer}
#boxk #tabk li.on{width:78px;height:19px;padding-top:5px;border:1px solid #AACBEE;border-bottom:none;color:#00f;background:#E8F2F7;position:relative;top:1px}
#boxk #tab_conk{border:1px solid #AACBEE;border-top:none;padding:20px}
#boxk #tab_conk li{display:none}
#boxk #tab_conk #tab_conk_1{display:block;}
</style>
    <div id="boxk">
        <ul id="tabk">
            <li class="on" id="tabk_1" onmouseover="switchTabk(1)">新闻</li>
            <li id="tabk_2" onmouseover="switchTabk(2)">财经</li>
            <li id="tabk_3" onmouseover="switchTabk(3)">娱乐</li>
            <li id="tabk_4" onmouseover="switchTabk(4)">娱乐</li>
        </ul>
        <ul id="tab_conk">
            <li id="tab_conk_1">新闻内容</li>
            <li id="tab_conk_2">财经内容</li>
            <li id="tab_conk_3">娱乐内容</li>
            <li id="tab_conk_4">娱乐内容3</li>
        </ul>
    </div>
    <script type="text/javascript">
        function switchTabk(n){
            for(var i = 1; i <= 4; i++){
                document.getElementById("tabk_" + i).className = "";
                document.getElementById("tab_conk_" + i).style.display = "none";
            }
            document.getElementById("tabk_" + n).className = "on";
            document.getElementById("tab_conk_" + n).style.display = "block";
        }
</script>
/*********5**********/
<style type="text/css">
#boxt{width:500px;font-size:12px}
#boxt ul{margin:0;padding:0;list-style:none}
#boxt #tabt{height:25px;padding-left:10px;border-bottom:1px solid #AACBEE}
#boxt #tabt li{width:80px;height:18px;padding-top:7px;margin-right:10px;text-align:center;float:left;background:#F3F8FD;cursor:pointer}
#boxt #tabt li.on{width:78px;height:19px;padding-top:5px;border:1px solid #AACBEE;border-bottom:none;color:#00f;background:#E8F2F7;position:relative;top:1px}
#boxt #tab_cont{border:1px solid #AACBEE;border-top:none;padding:20px}
#boxt #tab_cont li{display:none}
#boxt #tab_cont #tab_cont_1{display:block;}
</style>
    <div id="boxt">
        <ul id="tabt">
            <li class="on" id="tabt_1" onmouseover="switchTabt(1)">新闻</li>
            <li id="tabt_2" onmouseover="switchTabt(2)">财经</li>
            <li id="tabt_3" onmouseover="switchTabt(3)">娱乐</li>
            <li id="tabt_4" onmouseover="switchTabt(4)">娱乐</li>
        </ul>
        <ul id="tab_cont">
            <li id="tab_cont_1">新闻内容</li>
            <li id="tab_cont_2">财经内容</li>
            <li id="tab_cont_3">娱乐内容</li>
            <li id="tab_cont_4">娱乐内容3</li>
        </ul>
    </div>
    <script type="text/javascript">
        function switchTabt(n){
            for(var i = 1; i <= 4; i++){
                document.getElementById("tabt_" + i).className = "";
                document.getElementById("tab_cont_" + i).style.display = "none";
            }
            document.getElementById("tabt_" + n).className = "on";
            document.getElementById("tab_cont_" + n).style.display = "block";
        }
</script>
/***********6*************/
    <style type="text/css">
#boxe{width:500px;font-size:12px}
#boxe ul{margin:0;padding:0;list-style:none}
#boxe #tabe{height:25px;padding-left:10px;border-bottom:1px solid #AACBEE}
#boxe #tabe li{width:80px;height:18px;padding-top:7px;margin-right:10px;text-align:center;float:left;background:#F3F8FD;cursor:pointer}
#boxe #tabe li.on{width:78px;height:19px;padding-top:5px;border:1px solid #AACBEE;border-bottom:none;color:#00f;background:#E8F2F7;position:relative;top:1px}
#boxe #tab_cone{border:1px solid #AACBEE;border-top:none;padding:20px}
#boxe #tab_cone li{display:none}
#boxe #tab_cone #tab_cone_1{display:block;}
</style>
  <div id="boxe">
        <ul id="tabe">
            <li class="on" id="tabe_1" onmouseover="switchTabe(1)">新闻</li>
            <li id="tabe_2" onmouseover="switchTabe(2)">财经</li>
            <li id="tabe_3" onmouseover="switchTabe(3)">娱乐</li>
            <li id="tabe_4" onmouseover="switchTabe(4)">娱乐</li>
            <li id="tabe_5" onmouseover="switchTabe(5)">娱乐</li>
        </ul>
        <ul id="tab_cone">
            <li id="tab_cone_1">新闻内容</li>
            <li id="tab_cone_2">财经内容</li>
            <li id="tab_cone_3">娱乐内容</li>
            <li id="tab_cone_4">娱乐内容3</li>
            <li id="tab_cone_5">娱乐内容3</li>
        </ul>
    </div>
    <script type="text/javascript">
        function switchTabe(n){
            for(var i = 1; i <= 5; i++){
                document.getElementById("tabe_" + i).className = "";
                document.getElementById("tab_cone_" + i).style.display = "none";
            }
            document.getElementById("tabe_" + n).className = "on";
            document.getElementById("tab_cone_" + n).style.display = "block";
        }
</script>
</body>
</html>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/visi_zhangyang/p/3408991.html