排它思想：

1、先让所有的元素恢复默认值

2、再让选中的元素赋专有的值

3、干掉所有人，剩下我一个

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        * {

            padding: 0;

            margin: 0;

        }

        .box1 {

            width: 500px;

            height: 400px;

            border: 1px solid #b6ff00;

            overflow: hidden;

            margin: 100px auto;

        }

        ul {

            width: 510px;

            height: 40px;

            list-style: none;

        }

        li {

            float: left;

            width: 101px;

            height: 40px;

            text-align: center;

            font: 400 15px/40px "simsun";

            background-color: beige;

            cursor: pointer;

        }

        span {

            display: none;

            width: 500px;

            height: 360px;

            background-color: #ffd800;

            text-align: center;

            font: 700 150px/360px "simsun";

        }

        .current {

            background-color: #ffd800;

        }

        .show {

            display: block;

        }

    </style>

</head>

<body>

    <div class="box1">

        <ul>

            <li>鞋子</li>

            <li>上衣</li>

            <li>下装</li>

            <li>棉衣</li>

            <li>夏装</li>

        </ul>

        <span>鞋子</span>

        <span>上衣</span>

        <span>下装</span>

        <span>棉衣</span>

        <span>夏装</span>

    </div>

    <script>

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

        var sps = document.getElementsByTagName("span");

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

            lis[i].onclick = function () {

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

                    lis[j].className = lis[j].className.replace(/current/g, "");

                }

                this.className = this.className + " current";

                for (var m = 0; m < sps.length; m++) {

                    sps[m].className = sps[m].className.replace(/show/, "");

                }

                for (var n = 0; n < sps.length; n++) {

                    if (sps[n].innerHTML == this.innerHTML) {

                        sps[n].className = sps[n].className + " show";

                    }

                }

            }

        }

    </script>

</body>

</html>

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        button {

            margin: 10px;

            width: 100px;

            height: 40px;

            cursor: pointer;

        }

        .current {

            background-color: yellow;

        }

    </style>

</head>

<body>

    <button>按钮1</button>

    <button>按钮2</button>

    <button>按钮3</button>

    <button>按钮4</button>

    <button>按钮5</button>

    <script>

        var btns = document.getElementsByTagName("button");

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

            btns[i].onmouseover = function () {

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

                    btns[j].className = btns[j].className.replace(/current/, "");//让所有的元素恢复默认值

                }

                this.className = this.className + " current";//让选中的元素赋专有的值

            }

        }

    </script>

</body>

</html>

JS——tab切换的更多相关文章

  1. js Tab切换实例

    js 实现 tab 切换 实现如下效果: 1.图片每1秒钟切换1次. 2.当鼠标停留在整个页面上时,图片不进行轮播. 3.当点击切换页的选项上时,出现该选项的对应图片,而且切换页选项的背景颜色发生相应 ...

  2. JS tab切换事件

    $('ul.main-tab>li').on('mousedown', data, function() { var $this = $(this), $box = $('.main-tab-c ...

  3. avalon结合原生js tab切换

    <div class="fishqc-tap"> <div ms-class="[@codePic!=''&&@codeInfo!='' ...

  4. js用户管理中心tab切换界面模板

    效果体验:http://hovertree.com/texiao/js/27/ 效果图如下: 代码如下: <!DOCTYPE html> <html> <head> ...

  5. JS实现Tab切换

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. js或者jq的tab切换

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  7. 使用swiper.js实现移动端tab切换

    在项目中遇到的,要实现tab切换,我用的是swiper.js 官网:http://www.swiper.com.cn/api/start/new.html <!DOCTYPE html> ...

  8. bootstrap 标签页tab切换js（含报错原因）

    booststrap 标签页的tab切换,相信大家已经都很熟悉了,在boot官网示例以及其他网站已经很多罗列相关代码的了,这里就不赘述了.这里主要贴下让boot标签页默认显示哪个标签页的js. 主要留 ...

  9. js实现弹出窗口+遮罩层+tab切换

    [功能1]点击约谈按钮,弹出对话框和遮罩层(自己的叫法 专业叫法没有查) [部分重点代码] [下面的方法] (1)获取系统时间如何实现(2)点击如何实现弹出窗口和遮罩层 $(".date_n ...

随机推荐

  1. jQuery中事情的动态绑定 (转)

    小弟初来乍到,还弄不清楚如何添加链接   这是我转别人的,原文地址:http://blog.csdn.net/zhuyong0722/article/details/8590815#comments ...

  2. java NPE就是空指针异常，null pointer exception

    java NPE就是空指针异常,null pointer exception

  3. org.apache.shiro.web.servlet.ShiroHttpServletRequest cannot be cast to org.springframwork.web.mult..

    在用dwz框架+spring MVC时上传文件报的错 详细错误例如以下: 事实上就是一个类型转换错误,但却研究了好长时间,怎么都不知道哪里错了.由于前面卸过一个文件上传的和这个差点儿相同,那个就没有问 ...

  4. Android：使用SparseArray取代HashMap优化性能

    之前看到一篇关于adapter的文章用到了SparseArray,所以在这里写写关于SparseArray的使用方法. SparseArray是官方针对安卓所写的容器,与HashMap类似,只是性能比 ...

  5. 安卓dex 文件结构简要说明

    #ifndef _DEX_FILE_HELPER_ #define _DEX_FILE_HELPER_ //此文件仅仅是起帮助作用,帮助不太了解DexFile结构的了解一下DexFile相关结构,想更 ...

  6. pat-1087【最短路径】

    近期一次pat考试中的最后一题.事实上玩算法这东西就像打魔兽.不能光有思想上的高度,微操必须实打实.就这么个迪杰斯特拉算法.多少教科书上都讲烂了. 可是现场又有多少人是敲对的呢?不能光停留在理解上.必 ...

  7. Codeforces--631A--Interview（位运算）

     Interview Crawling in process... Crawling failed Time Limit:1000MS     Memory Limit:262144KB     ...

  8. Java —— 正则表达式

    0. 注意 正则表达式里的点号(.),可以匹配除换行符之外的所有字符 Java 语言同其他语言中的正则表达式的不同在于: 对 \(反斜线)的不同处理 \\:其他语言中,表示在正则表达式中插入普通的反斜 ...

  9. python lambda表达式&map/filter/reduce

    习条件运算时,对于简单的 if else 语句,可以使用三元运算来表示,即: 1 2 3 4 5 6 7 8 # 普通条件语句 if 1 == 1:     name = 'wupeiqi' else ...

  10. ref 和out的区别

    在C#语言中,参数的传递有两种,一种是值传递,一种是引用传递.ref与out这两种方式都属于引用传递,只是他们的用法稍有不同.下面看几个例子 使用ref的例子 class test { static ...