可重复使用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>

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

纯js代码实现手风琴特效
我知道现在大多数前端开发人员都在使用jQuery等第三方的库来进行开发,这不仅节约了时间,也让效率大大的提高,并让公司的效益增加,何乐而不为呢? 但是,这也会有一定的缺点,比如jQ比js慢,尤其在大型 ...
城市连动纯js代码DEMO
前台代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" co ...
站长常用的200个js代码站长常用js代码大全站长常用js代码集合
站长常用的200个js代码 1.文本框焦点问题 onBlur:当失去输入焦点后产生该事件 onFocus:当输入获得焦点后,产生该文件 Onchange:当文字值改变时,产生该事件 Onselect: ...
6行代码实现纯js导出excel
// excel导出当前列表 function memberExport() { var oHtml = $('#list').html(); var excelHtml = '<html> ...
图片切换效果，纯js
公司有个技术很牛x的“老腊肉”,我向他请教,他给了我个网址,上面蛮多效果的,于是乎~我决定照着效果看能不能自己敲出来,我要变大神X3,重要的事说3遍. 它完成的效果是这样的: 好吧,一步一步来,先把框 ...
jxbrowser java代码直接调用js代码
https://blog.csdn.net/shuaizai88/article/details/73743669 final Browser browser = new Browser(); Bro ...
四十年前的 6502 CPU 指令翻译成 JS 代码会是怎样
去年折腾的一个东西,之前 blog 里也写过,不过那时边琢磨边写,所以比较杂乱,现在简单完整地讲解一下. 前言当时看到一本虚拟机相关的书,正好又在想 JS 混淆相关的事,无意中冒出个问题:能不能把某 ...
使用Underscore.js的template将Backbone.js的js代码和html代码分离
这段时间在学习Require.js和Backbone.js的过程中,发现有些项目里的HTML代码都是写在View的js代码里面的,渲染的时候需要对Collection进行循环,再将HTML代码拼接上去 ...
原始的js代码和jquery对比
Even a task as simple as this can be complicated without jQuery at our disposal. In plain JavaScript ...

随机推荐

MVC 框架中的缓存
在程序中加入缓存的目的很多是为了提高程序的性能,提高数据的查找效率,在MVC框架中也引入了非常多的缓存,比如Controller的匹配查找,Controller,ControllerDescripto ...
本地动态SQL
(转自:http://blog.itpub.net/26622598/viewspace-718134) 一.什么是动态SQL 大多数PL/SQL都做着一件特殊的结果可预知的工作.例如,一个存储过程可 ...
EL标签
1.EL的作用 jsp的核心语法: jsp表达式 <%=%>和 jsp脚本<% %>. 开发jsp的原则: 尽量在jsp页面中少写甚至不写java代码. 使用EL表达式替换掉 ...
简单使用JDOM解析XML
原文:http://liuwentao.iteye.com/blog/59978 使用JDOM解析XML一.前言JDOM是Breet Mclaughlin和Jason Hunter两大Java高手的创 ...
ARM 内核SP，LR，PC寄存器
深入理解ARM的这三个寄存器,对编程以及操作系统的移植都有很大的裨益. 1.堆栈指针r13(SP):每一种异常模式都有其自己独立的r13,它通常指向异常模式所专用的堆栈,也就是说五种异常模式.非异常模 ...
Go语言使用匿名结构体解析JSON数据
手机拥有屏幕.电池.指纹识别等信息,将这些信息填充为 JSON 格式的数据.如果需要选择性地分离 JSON 中的数据则较为麻烦.Go 语言中的匿名结构体可以方便地完成这个操作. 首先给出完整的代码,然 ...
rhel7+apache+c cgi+动态域名实现web访问
1. 申请动态域名/安装no-ip客户端 https://blog.csdn.net/lee244868149/article/details/44095835 2. yum安装httpd 两种方法安 ...
win10如何在局域网中设置一台电脑的固定ip地址
在工作和生活中,经常要遇到远程访问一台电脑的情况,但是在局域网中如果不进行设置,通常一台电脑的ip是自动生成的,,没有固定,这就导致下次访问这个地址时,不能正常访问,下面就交大家如何在win10系统中 ...
Spring3.x JSR-303
JSR303介绍 JSR303-Bean Validation描述:This JSR will define a meta-data model and API for JavaBeanTM vali ...
LinuxCentos6安装MySql workbench
参考地址:http://www.cnblogs.com/elaron/archive/2013/03/19/2968699.html

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

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

随机推荐

热门专题