<!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>

可重复使用Tab切换代码和纯js代码的更多相关文章

  1. 纯js代码实现手风琴特效

    我知道现在大多数前端开发人员都在使用jQuery等第三方的库来进行开发,这不仅节约了时间,也让效率大大的提高,并让公司的效益增加,何乐而不为呢? 但是,这也会有一定的缺点,比如jQ比js慢,尤其在大型 ...

  2. 城市连动纯js代码DEMO

    前台代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" co ...

  3. 站长常用的200个js代码 站长常用js代码大全 站长常用js代码集合

    站长常用的200个js代码 1.文本框焦点问题 onBlur:当失去输入焦点后产生该事件 onFocus:当输入获得焦点后,产生该文件 Onchange:当文字值改变时,产生该事件 Onselect: ...

  4. 6行代码实现纯js导出excel

    // excel导出当前列表 function memberExport() { var oHtml = $('#list').html(); var excelHtml = '<html> ...

  5. 图片切换效果，纯js

    公司有个技术很牛x的“老腊肉”,我向他请教,他给了我个网址,上面蛮多效果的,于是乎~我决定照着效果看能不能自己敲出来,我要变大神X3,重要的事说3遍. 它完成的效果是这样的: 好吧,一步一步来,先把框 ...

  6. jxbrowser java代码直接调用js代码

    https://blog.csdn.net/shuaizai88/article/details/73743669 final Browser browser = new Browser(); Bro ...

  7. 四十年前的 6502 CPU 指令翻译成 JS 代码会是怎样

    去年折腾的一个东西,之前 blog 里也写过,不过那时边琢磨边写,所以比较杂乱,现在简单完整地讲解一下. 前言 当时看到一本虚拟机相关的书,正好又在想 JS 混淆相关的事,无意中冒出个问题:能不能把某 ...

  8. 使用Underscore.js的template将Backbone.js的js代码和html代码分离

    这段时间在学习Require.js和Backbone.js的过程中,发现有些项目里的HTML代码都是写在View的js代码里面的,渲染的时候需要对Collection进行循环,再将HTML代码拼接上去 ...

  9. 原始的js代码和jquery对比

    Even a task as simple as this can be complicated without jQuery at our disposal. In plain JavaScript ...

随机推荐

  1. linux Centos7 下vsftpd 安装与配 FTP

    一.说明 linux 系统下常用的FTP 是vsftp, 即Very Security File Transfer Protocol. 还有一个是proftp(Profession ftp). 我们这 ...

  2. [转载]Java动态填充word文档并上传到服务器

    一. 需求背景 在一些特殊应用场合,客户希望在服务器上生成文档的同时并填充数据,客户端的页面不显示打开文档,但是服务器上生成文档对服务器压力很大,目前服务器上生成文档第一种就是方式是jacob, 但是 ...

  3. Codeforces Round #394 (Div. 2) B. Dasha and friends

    B. Dasha and friends time limit per test:2 seconds memory limit per test:256 megabytes input:standar ...

  4. vs中： 错误，未定义的标识符getline 的解决方法

    这种情况一般都是,在使用的时候没有include<string>而导致的,加上就可以正确编译通过

  5. 关于linux 编程

    emacs 编辑器 gcc/g++ 编译器 gdb 调试工具 valgrind 内存泄露检查 doxygen 文档组织工具

  6. 剑指Offer（第二版）面试案例：树中两个节点的最低公共祖先节点

    (尊重劳动成果,转载请注明出处:http://blog.csdn.net/qq_25827845/article/details/74612786冷血之心的博客) 剑指Offer(第二版)面试案例:树 ...

  7. angularJs 模拟jQuery中的this

    在angularJs中,this指向$scope!可以$event配合使用$(event.target)实现,代码如下: HTML部分: <p ng-click="testClick( ...

  8. 2017年--10年java大神告诉你开发最常用的百分之二十的技术有哪些？

    首先题主说的20%我不知道从哪方面去理解.接下来我会将自己多年来工作中会经常使用到的技术列出来. 1.html.css 2.java工作原理(jvm) 3.java语法.数据结构和算法 4.java语 ...

  9. 我们为什么选择JAVA

    我们为什么选择Java 大多数人选择Java可能只是因为听说Java前景好.Java比较好找工作.Java语言在TIOBE排行榜上一直位于前三等等之类的原因,但是Java具体好在哪里,心里却是没有什么 ...

  10. 利用struts2的json返回方式来控制jquery.validate的remote框架，进行表单验证