js实现选项卡切换的三种方式

前两种主要实现一个选项卡的切换，第三种使用闭包看书，构造函数实现多个选项卡的切换：

1.第一种实现实现效果为：

实现代码为：

<!doctype html>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8"/>

    <title>tab切换</title>

    <style type="text/css">

        * {

            font: normal 15px "微软雅黑";

            color: #000;

        }

        ul {

            list-style-type: none;

            padding-left: 5px;

            margin-bottom: -2px

        }

        a {

            text-decoration: none;

        }

        p {

            display: block;

            margin: 10px

        }

        li {

            display: inline-block;

            border: 1px solid #999;

            border-bottom: 2px solid #a00;

            background: #fff;

            text-align: center;

            width: 60px;

            height: 30px;

            margin: 0 1px;

            line-height: 30px

        }

        ul .active {

            border-top: 2px solid #a00;

            border-bottom: 2px solid #fff;

        }

        #content {

            margin: 0;

            border: 1px solid #ccc;

            border-top: 2px solid #a00;

            width: 300px

        }

        #content div {

            display: none

        }

        #content .active {

            display: block;

        }

    </style>

</head>

<body>

<div>

    <ul>

        <li name="a" onclick="tab(this)" class="active"><a href="#">房产</a></li>

        <li name="a" onclick="tab(this)"><a href="#">家居</a></li>

        <li name="a" onclick="tab(this)"><a href="#">二手房</a></li>

    </ul>

    <div id="content">

        <div class="active" name="con">

            <p>20jf钢带机额戴鸿慈贷款放款l</p>

            <p>20jf钢带机额戴鸿慈贷款放款l</p>

            <p>20jf钢带机额戴鸿慈贷款放款l</p>

        </div>

        <div name="con">

            <p>nvmllllmlddnlv来的都来l</p>

            <p>戴绿帽没vvmdslnv</p>

            <p>的女凯迪拉克vk</p>

        </div>

        <div name="con">

            <p>发V</p>

            <p>叉路口积分卡很多可没</p>

            <p>奉公如法</p>

        </div>

    </div>

</div>

<script type="text/javascript">

    var li_arr = document.getElementsByTagName("li");

    var div_arr = document.getElementsByName("con");

    var len = li_arr.length;

    function tab(obj) {

        for (var i = 0; i < len; i++) {

            if (li_arr[i] == obj) {

                li_arr[i].setAttribute("class", "active");

                div_arr[i].setAttribute("class", "active");

            } else {

                li_arr[i].setAttribute("class", "");

                div_arr[i].setAttribute("class", "");

            }

        }

    }

</script>

</body>

</html>

2.第二种实现效果为：

主要实现代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

 <style>

     *{padding: 0; margin: 0; box-sizing: border-box}

     div{ width: 70%; margin: 100px auto}

     ul{list-style: none; overflow: hidden}

     .tabs li{

         float: left;

         width: 100px;

         text-align: center;

         line-height: 30px;

         background: #f60;

         border: 1px solid #f60;

         border-bottom: none;

         cursor: pointer;

     }

     .tabs li:hover{

         background: #fff;

     }

     .tabs li.active{

         background: #fff;

     }

     .content{

         position: relative;

         width: 400px;

         height: 300px;

         border: 1px solid #f60;

         border-top: none;

     }

     .content li{

         width: 100%;

         height: 100%;

         position: absolute;

         padding: 10px;

         display: none;

     }

 </style>

</head>

<body>

<div>

<ul class="tabs" id="tabs">

    <li class="active">选项1</li>

    <li>选项2</li>

    <li>选项3</li>

    <li>选项4</li>

</ul>

    <ul class="content" id="content">

        <li style="display: block">内容1</li>

        <li>内容2</li>

        <li>内容3</li>

        <li>内容4</li>

    </ul>

</div>

<script>

//    普通方法实现一个选项卡切换

    var tabs =document.getElementById("tabs");

    var tablist = tabs.children;

    var content =document.getElementById("content");

    var conlist = content.children;

    for(i=0;i<tablist.length; i++){

        tablist[i].index = i;  // tablist[i]增加index属性 ，属性值为该项的下标

        tablist[i].onclick = function(){

            for(j=0;j<conlist.length;j++){

                tablist[j].className ="";

                conlist[j].style.display = "none";

            }

            this.className = "active";

            conlist[this.index].style.display = "block";

        }

    }

</script>

</body>

</html>

　3.　第三种实现效果为：

在第二种实现方式的基础上,实现多个选项卡的切换，使用了闭包函数

主要实现代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        * {

            margin: 0;

            padding: 0;

            box-sizing: border-box;

        }

        div {

            margin: 100px;

        }

        ul {

            list-style: none;

            overflow: hidden;

        }

        .tabs li {

            float: left;

            width: 100px;

            height: 50px;

            line-height: 50px;

            text-align: center;

            border: 1px solid fuchsia;

            background: salmon;

            border-bottom: none;

            cursor: pointer;

        }

        .tabs li.active {

            background: beige

        }

        .content {

            position: relative;

            width: 400px;

            height: 300px;

            border: 1px solid fuchsia;

            border-top: none;

        }

        .content li {

            width: 100%;

            height: 100%;

            position: absolute;

            display: none;

            padding: 170px;

        }

    </style>

</head>

<body>

<div>

    <ul class="tabs" id="tab1">

        <li class="active">选项1</li>

        <li>选项2</li>

        <li>选项3</li>

        <li>选项4</li>

    </ul>

    <ul class="content" id="content1">

        <li style="display: block">内容1</li>

        <li>内容2</li>

        <li>内容3</li>

        <li>内容4</li>

    </ul>

</div>

<div>

    <ul class="tabs" id="tab2">

        <li class="active">选项1</li>

        <li>选项2</li>

        <li>选项3</li>

        <li>选项4</li>

    </ul>

    <ul class="content" id="content2">

        <li style="display: block">内容1</li>

        <li>内容2</li>

        <li>内容3</li>

        <li>内容4</li>

    </ul>

</div>

<script>

    function tab(tabid, contentid){

        var  tabul = document.getElementById(tabid);

        var tablists = tabul.getElementsByTagName("li");

        var contentul = document.getElementById(contentid);

        var conlists = contentul.getElementsByTagName("li");

        for(i=0;i<tablists.length; i++){

            tablists[i].onclick = function(i){   //闭包函数

                return function (){

                    for(j=0;j<conlists.length;j++){

                        tablists[j].className ="";

                        conlists[j].style.display = "none";

                    }

                    this.className = "active";

                    conlists[i].style.display = "block";

                }

            }(i);

        }

    }

    tab("tab1", "content1");

    tab("tab2", "content2");

</script>

</body>

</html>

js实现选项卡切换的三种方式的更多相关文章

【百度地图API】关于如何进行城市切换的三种方式
原文:[百度地图API]关于如何进行城市切换的三种方式摘要:本文介绍了三种切换城市的方式:查询城市.城市列表和显示城市轮廓. ------------------------------------ ...
JS中事件绑定的三种方式
以下是搜集的在JS中事件绑定的三种方式. 1. HTML onclick attribute <button type="button" id="upl ...
JS弹出对话框的三种方式
JS弹出对话框的三种方式我们用到了alert()方法.prompt()方法.prompt()方法,都是在网页有一个弹出框,那么就让我们探究一下他们之间的区别: 一.第一种:alert()方法 < ...
js对象实例化的常见三种方式
三种常见模式:工厂模式,构造函数模式,原型模式 <span style="font-size:18px;"><!doctype html> <html ...
js中点击事件方法三种方式的区别
在javascript中,可以为某个元素指定事件,指定的方式有以下三种: 1.在html中,使用onclick属性 2.在javascript中,使用onclick属性 (1)注意函数名没有双引号. ...
js中定义变量的三种方式const,val,let 的区别
js中三种定义变量的方式const, var, let的区别. 1.const定义的变量不可以修改,而且必须初始化. 1 const b = 2;//正确 2 // const b;//错误,必须初始 ...
js弹出对话框的三种方式（转）
原文地址:https://www.jb51.net/article/81376.htm javascript的三种对话框是通过调用window对象的三个方法alert(),confirm()和prom ...
js页面取值的三种方式
<input id=""<radio <checkbox<div<img对于这些标签内参数取值,一般分为三种类型:一.有关id取值用 #:取id处的v ...
JS异步加载的三种方式
js加载的缺点:加载工具方法没必要阻塞文档,过得js加载会影响页面效率,一旦网速不好,那么整个网站将等待js加载而不进行后续渲染等工作. 有些工具方法需要按需加载,用到再加载,不用不加载,. 默认正常 ...

随机推荐

【Android纳米学位】project 0 - 问题汇总
1.页面布局参考:http://www.xuebuyuan.com/1100763.html 从不知道如何下手到开始布局出想要的样子,使用线性布局及属性 margin,padding 2.添加点击事 ...
ac automaton 专题
hdu2222 模板题 hdu2825 在ac自动机上的状压dp hdu3247 在ac自动机上bfs poj2778 求长度为n,不包含给定的m个字符串的任何一个的字符串的个数其实就是求长度为n的 ...
js 简单倒计时插件和使用方法
// 倒计时插件 (function (){ function countdown(config){ var startDate = config.start ? new Date(config.st ...
安装notepad++之后怎样在鼠标右键上加上Edit with notepad++
在鼠标右键上加入使用notepad++编辑我们在安装完notepad++文本编辑器之后,在一个文本文件上右键有时候并没有出现"使用notepad++编辑的选项",我们可以通过简单 ...
QT中窗口刷新事件的学习总结
一．主要理解一下几个方法和属性: 1．QWidget * QScrollView::viewport () const 2．void QWidget::paintEvent ( QPaintEvent ...
Linq to OBJECT延时标准查询操作符
1.Where 操作符用于限定输入集合中的元素,将符合条件的元素组织声称一个序列结果.2.Select 操作符用于根据输入序列中的元素创建相应的输出序列中的元素,输出序列中的元素类型可以与输入序列中 ...
Android SDK 下载速度慢解决方法
Mac 本搞Android开发,遇到Android SDK 下载速度慢,解决方法大概有两种.第一,FQ.这种方法比较彻底,但是要想有稳定的效果还的要花大价钱.第二,有些高人直接给了SDK中各软件的下载 ...
VMWare 虚拟机
http://pan.baidu.com/share/link?shareid=5873&uk=941708466 VMWare是虚拟化解决方案厂商,旗下有多款虚拟机软件产品,其中最知名的要数 ...
《Unix环境高级编程》环境搭建
用的是第三版的安装包:src.3e.tar.gz 地址:http://www.apuebook.com/ 1.解压:$ tar -zxvf *.tar.gz 2. $ cd apue.3e/ 3. ...
SDN,NFV
CAPEX,capital expenditures 投资成本OPEX,Operating Expense 运营费用space & power consumption 图解NFV与SDN关系

js实现选项卡切换的三种方式

js实现选项卡切换的三种方式的更多相关文章

随机推荐

热门专题