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. 【IoT平台技术对接分享】如何上传正确的消息推送证书

    消息推送应用实现消息推送的接口,部署证书,同时上传根证书到平台. 目前消息推送失败,很大一部分原因是证书上传不对.推荐小伙伴们使用下面的方法导出证书. 推送:平台调用应用服务器的restful接口将数 ...

  2. SpringBoot整合freemarker模板

    一.目录展示 二.导入依赖 三.application.properties配置文件 四.在src/main/resource/templates文件夹中创建HelloFreeMarker.ftl文件 ...

  3. luogu P1840 Color the Axis_NOI导刊2011提高（05）|并查集

    题目描述 在一条数轴上有N个点,分别是1-N.一开始所有的点都被染成黑色.接着我们进行M次操作,第i次操作将[Li,Ri]这些点染成白色.请输出每个操作执行后剩余黑色点的个数. 输入格式 输入一行为N ...

  4. MAC vim修改hosts文件

    在终端输入sudo vim /etc/hosts 输入密码获取写权限 输入i,执行insert插入修改操作,修改hosts文件内容 修改完成后先按ESC进入命令模式,再按shift + :,在底端出现 ...

  5. Java修炼——接口详解_接口的特征_使用接口的意义

    接口中可以包含的内容: 抽象法和非抽象方法(jdk1.8,必须使用default的关键字),属性(public static final)常量. 接口和类的关系 1.(继承了接口)类必须去实现接口中的 ...

  6. A.Math Problem

    题意:这里有n个区间,你需要添加一个区间,使得每个区间都至少有一个共同的点在这个区间,且长度最小,输出最小的长度. 分析:找出所有区间右端点的最小值,和所有区间左端点的最大值,然后答案就是max(0, ...

  7. Python文章相关性分析---金庸武侠小说分析-2018.1.16

    最近常听同事提及相关性分析,正巧看到这个google的开源库,并把相关操作与调试结果记录下来. 输出结果: 比较有意思的巧合是黄蓉使出打狗棒,郭靖就用了降龙十八掌,再后测试了名词的解析. 小说集可以百 ...

  8. telnet远程登陆

    这篇文章是第二次更新,内容为telnet远程登陆路由器,非常简单.直接进入正题,在网络配通的情况下,为路由器设置登陆密码和管理员密码,就可以通过pc机远程管理路由器或交换机. 目的: 网络拓扑图如下, ...

  9. python学习-for

    # 对字典的遍历. key-value# dict_my = {"class":"python17","goal":"翻倍&quo ...

  10. 使用python实现哈希表、字典、集合

    哈希表 哈希表(Hash Table, 又称为散列表),是一种线性表的存储结构.哈希表由一个直接寻址表和一个哈希函数组成.哈希函数h(k)将元素关键字k作为自变量,返回元素的存储下标. 简单哈希函数: ...