tab切换案例实现

<!DOCTYPE html>

<html>

<head lang="en">

  <meta charset="UTF-8">

  <title></title>

  <style>

    * {

      margin: 0;

      padding: 0;

    }

    ul {

      list-style-type: none;

    }

    .box {

      width: 400px;

      height: 300px;

      border: 1px solid #ccc;

      margin: 100px auto;

      overflow: hidden;

    }

    .hd {

      height: 45px;

    }

    .hd span {

      display: inline-block;

      width: 90px;

      background-color: pink;

      line-height: 45px;

      text-align: center;

      cursor: pointer;

    }

    .hd span.current {

      background-color: yellow;

    }

    .bd li {

      height: 255px;

      background-color: hotpink;

      display: none;

    }

    .bd li.current {

      display: block;

    }

  </style>

</head>

<body>

  <div class="box" id="box">

    <div class="hd">

      <span class="current">体育</span>

      <span>娱乐</span>

      <span>新闻</span>

      <span>综合</span>

    </div>

    <div class="bd">

      <ul>

        <li class="current">我是体育模块</li>

        <li>我是娱乐模块</li>

        <li>我是新闻模块</li>

        <li>我是综合模块</li>

      </ul>

    </div>

  </div>

  <script src="common.js"></script>

  <script>

    //获取div

    var box = my$("box");

    //获取第一个div

    var hd = box.getElementsByTagName("div")[0];

    //获取第二个div

    var bd = box.getElementsByTagName("div")[1];

    //获取第一个div里面的span

    var spans = hd.getElementsByTagName("span");

    //获取第二个div里面的li

    var list = bd.getElementsByTagName("li");

    //遍历span

    //点击的时候，

    //先所有span的样式移除

    //再当前被电击的span应用类样式

    //两部分的排他，用一个索引联系在一起

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

      //在点击之前就，设置一个索引保存在span标签中

      spans[i].setAttribute("index", i);//===================

      //点击的时候，

      spans[i].onclick = function () {

        //先所有span的样式移除

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

          spans[j].removeAttribute("class");

        }

        //再当前被点击的span应用类样式

        this.className = "current";

        //span被点击的时候获取存储的索引值

        var num = this.getAttribute("index");//===========

        //获取所有的li标签,每个li标签先全部隐藏

        for (var k = 0; k < list.length; k++) {

          list[k].removeAttribute("class");

        }

        //当前被点击的span对应的li标签显示

        list[num].className = "current";

      };

    }

  </script>

</body>

</html>

实现效果：

JS---DOM---tab切换案例实现---排他的更多相关文章

  1. Angular——tab切换案例

    基本介绍 angular框架下的tab切换,相比较于之前的纯js写的代码,有一个很大的特点就是以数据为驱动,基本上不用搜索dom元素就可以实现效果 基本使用 (1)导航部分使用的是的状态使用的是ng- ...

  2. Js 实现tab切换效果

    今天商城系统的后台要添加一个Tab切换的效果,一开始没有思路想要自己去实践这个效果 从网上找jquery 已经有了很好看的案例,实现之后我来学习下思路是如何完成的

  3. JS实现Tab切换

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

  4. 原生JS实现tab切换--web前端开发

    tab切换非常常见,应用非常广泛,比较实用,一般来说是一个网站必不可少的一个效果.例如:https://123.sogou.com/中的一个tab部分: 1.案例源代码 <!DOCTYPE ht ...

  5. tab切换案例

    做个简单的tab切换效果,分别于jquery和js操作 (1)jQuery操作 先看下效果: <!DOCTYPE html> <html lang="en"> ...

  6. Vue.js实现tab切换效果

    利用Vue实现简易tab切换效果 1.1 在我们平时浏览网站的时候,经常看到的特效有图片轮播.导航子菜单的隐藏.tab标签的切换等等.这段时间学习了vue后,开始要写出一些简单的特效. 1.2 实现思 ...

  7. 原生js实现tab切换

    //通过原生js实现table切换<html><head><meta http-equiv="Content-Type" content=" ...

  8. JS 导航条切换案例

    HTML代码: <div class="tab"> <div class="tab_list"> <ul> <li c ...

  9. js Tab切换实例

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

随机推荐

  1. Redis自动化安装以及集群实现

    Redis实例安装 安装说明:自动解压缩安装包,按照指定路径编译安装,复制配置文件模板到Redis实例路的数据径下,根据端口号修改配置文件模板 三个必须文件:1,配置文件,2,当前shell脚本,3, ...

  2. MySQL必知必会(Select, Where子句)

    SELECT prod_name, prod_price FROM products WHERE prod_price = 2.5; SELECT prod_name, prod_price FROM ...

  3. 洛谷 题解 P3173 【[HAOI2009]巧克力】

    本蒟蒻又双叒叕被爆踩辣! 又是一道经典的贪心题: 那么怎样切割该块巧克力,花费的代价最少呢? Solution: 窝们考虑每个状态,有多少种选择方法? 是不是可以选择横着切或者竖着切,就这两种方法吧: ...

  4. 过滤器和监听器实现用户的在线登录人数，以及设置session时长。

    过滤器: package com.bjsxt.filter; import java.io.IOException; import javax.servlet.Filter; import javax ...

  5. AtCoder-3867

    Find the maximum possible sum of the digits (in base 10) of a positive integer not greater than N. C ...

  6. MDS 多活配置

    CephFS 介绍及使用经验分享 阅读 1179 收藏 2 2019-01-14 原文链接:www.jianshu.com WebRTC SFU中发送数据包的丢失反馈juejin.im 目录 Ceph ...

  7. 详解numpy的argmax

    从最简单的例子出发 假定现在有一个数组a = [3, 1, 2, 4, 6, 1]现在要算数组a中最大数的索引是多少.这个问题对于刚学编程的同学就能解决.最直接的思路,先假定第0个数最大,然后拿这个和 ...

  8. Asp.net Core dotnet 发布类库文件 带上注释，发布预发行版，带上所有引用

    带上注释 效果图 带上所有引用 效果图 预发行版 效果图 由于微软取消了  project.json  这个json 转而用了csproj 用于保存配置 所以懵逼很大一会 资料来源 project.j ...

  9. 一线互联网公司Redis使用精髓，你必须要掌握这4点！

    先来看一下这些Redis面试题你会几道? 1.什么是 Redis?简述它的优缺点? 2.Redis 与 memcached 相比有哪些优势? 3.Redis 支持哪几种数据类型? 4.Redis 主要 ...

  10. js方法中参数传过来的值包含括号

    前提,传递的id为变量值,比如从后台获取数据循环,在每个循环里调用shenpi()方法,假设传的id包含括号,例如 20190329100833(更正) 这样的数据,那么直接调用会报错,控制台会报错: ...