* index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>js + css 实现标签内容切换功能</title>

    <link type="text/css" rel="stylesheet" href="./css/style.css" />

</head>

<body>

    <ul id="list-title">

        <li class="list-item list-item-checked">1</li>

        <li class="list-item">2</li>

        <li class="list-item">3</li>

    </ul>

    <div id="content-box">

        <div class="contents contents-checked">content_1</div>

        <div class="contents">content_2</div>

        <div class="contents">content_3</div>

    </div>

    <script type="text/javascript" src="./js/switchTabs.js"></script>

    <script>

        switchTabs(".list-item", ".contents", "list-item-checked", "contents-checked");

    </script>

</body>

</html>

　　

* css/style.css

#list-title {

    height: 60px;

    margin: 0;

    padding: 0;

    list-style-type: none;

}

.list-item {

    float: left;

    width: 100px;

    height: 50px;

    margin: 2px;

    line-height: 50px;

    font-size: 28px;

    text-align: center;

    border: 1px solid #ccc;

    cursor: pointer;

}

.list-item-checked {

    background-color: #70adff;

    color: #ffffff;

}

#content-box {

    position: relative;

    clear: both;

    margin: 0 2px;

}

.contents {

    position: absolute;

    left: 0;

    top: 0;

    width: 312px;

    height: 300px;

    font-size: 32px;

    line-height: 300px;

    text-align: center;

    border: 1px solid #ccc;

    z-index: 0;

    opacity: 0;

    visibility: hidden;

    -webkit-transition: all .5s;

    -moz-transition: all .5s;

    -ms-transition: all .5s;

    -o-transition: all .5s;

    transition: all .5s;

}

.contents-checked {

    z-index: 1;

    opacity: 1;

    visibility: visible;

}

#content-box > .contents:first-child {

    background-color: #c8ff40;

}

#content-box > .contents:nth-child(2) {

    background-color: #41ff6f;

}

#content-box > .contents:nth-child(3) {

    background-color: #ff82a0;

}

　　

* js/switchTabs.js

/*

 * tab:用于触发事件的标签的selector；

 * content:内容容器的类名；

 * ts:标签为选中状态时的样式；

 * cs:内容容器为选中状态时的样式；

 * 检查元素的类名列表中是否有指定的类名，如果有则移除，如果没有则添加；

 * */

function switchTabs(tab, content, ts, cs) {

    var tabs = document.querySelectorAll(tab),

        contents = document.querySelectorAll(content),

        last = 0; // 上一次选中元素的index

    tabs.forEach(function (tab, i) {

        (function (i) {

            tab.onclick = function () {

                tabs[last].classList.remove(ts);

                contents[last].classList.remove(cs);

                last = i;

                this.classList.add(ts);

                contents[i].classList.add(cs);

            }

        })(i);

    });

}

　　

javascript 标签切换的更多相关文章

  1. 每天一个JavaScript实例-tab标签切换

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

  2. 使用SuperSlide 实现标签切换

    小颖之前还写过一篇jquery实现标签切换的文章  jquery实现Tab选项卡菜单 今天小颖逛博客园时看到了用SuperSlide 实现标签切换的文章,所以小颖就自己试了下,试了后发现SuperSl ...

  3. JS特效之Tab标签切换

    在我们平时浏览网站的时候,经常看到的特效有图片轮播.导航子菜单的隐藏.tab标签的切换等等.这段时间学习了JS后,开始要写出一些简单的特效.今天我也分享一个简单tab标签切换的例子.先附上代码: HT ...

  4. Bootstrap——设置Tab标签切换

    最近一个小项目需要用Tab标签切换显示不同div内容,用到了Bootstrap里面的东西,但是在Bootstrap3教程里却没有找到对应的代码,这里记录一下,方便以后快速查阅学习. 代码如下: < ...

  5. CSS和JavaScript标签style属性对照表

    CSS和JavaScript标签style属性对照表一般情况是把"-"去掉,后面字母用大写. CSS语法 (不区分大小写) JavaScript语法 (区分大小写) border ...

  6. 标签切换JS代码

    //标签切换 var nav = $('.index-nav'); var content = $('.index-nav-content li'); function hoverNav ($eleA ...

  7. 实例：jQuery实现标签切换

    具体实现效果如图: 原理很简单,就是监听鼠标滑动和点击事件.在第一个标签切换的示例中,当鼠标滑过某个标签时,就把class转移到当前标签.这里用到的jQuery方法主要是each()确定当前是哪一个标 ...

  8. JS 实现 Tab标签切换功能

    Tab标签切换 效果图: HTML部分: <div class="wrap">     <ul id="tag">       < ...

  9. 利用JavaScript来切换样式表

    切换样式表 html页 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...

随机推荐

  1. S3C2440—10.代码重定位

    文章目录 一.启动方式 1.1 NAND FLASH 启动 1.2 NOR FLASH 启动 二. 段的概念 2.1 重定位数据段 2.2 加载地址的引出 三.链接脚本 3.1 链接脚本的引入 3.2 ...

  2. 超过Numpy的速度有多难？试试Numba的GPU加速

    技术背景 Numpy是在Python中非常常用的一个库,不仅具有良好的接口文档和生态,还具备了最顶级的性能,这个库很大程度上的弥补了Python本身性能上的缺陷.虽然我们也可以自己使用Cython或者 ...

  3. 题解 Medium Counting

    传送门 又是神仙DP 发现如果只有两个串就很好做了 于是这个神仙DP定义就从这里下手:令 $dp[p][c][l][r] 表示在 \([s_l, s_r]\) 这段字符串中,考虑从第 \(p\) 个位 ...

  4. mysql 局域网连接

    下面分别简述操作: 配置虚拟机网络 默认方式是NAT,但为了让宿主机之外的其它计算机也能访问虚拟机,NAT方式配置起来有些复杂,这里推荐用桥接模式,关于VM的几种网络方式的区别,可以参考这篇文章配置好 ...

  5. c++与c#混合编程

    C#写界面比较方便,而C++则擅长写算法,所以将两者结合起来将会加快程序的开发速度,并保证程序的质量.但C#与C++的混合编程有很多细节问题需要注意,下面简要列举一些并指出相应的解决办法. 1. 将本 ...

  6. 【linux】vim常用命令

    转自:https://www.runoob.com/linux/linux-vim.html vi/vim 的使用 基本上 vi/vim 共分为三种模式,分别是命令模式(Command mode),输 ...

  7. Python的dict

    dict把key和value关联起来,可以通过 key来查找 value. 花括号 {} 表示这是一个dict,然后按照 key: value, 写出来即可.最后一个 key: value 的逗号可以 ...

  8. Git脑图

    ps:有时我们想一台有不同的git账号对应不同的git仓库时(gitLab/gitHub)时,除了全局的用户配置定义,我们可以为不同仓库自定义不同用户名和邮件 1.查询全局的配置:git config ...

  9. Python的GPU编程实例——近邻表计算

    技术背景 GPU加速是现代工业各种场景中非常常用的一种技术,这得益于GPU计算的高度并行化.在Python中存在有多种GPU并行优化的解决方案,包括之前的博客中提到的cupy.pycuda和numba ...

  10. springcloud<zuul过滤器简单配置与跨域设置>

    package com.wangbiao.config; import com.netflix.zuul.ZuulFilter; import com.netflix.zuul.context.Req ...