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. 【nodejs原理&源码赏析（7）】【译】Node.js中的事件循环，定时器和process.nextTick

    [摘要] 官网博文翻译,nodejs中的定时器 示例代码托管在:http://www.github.com/dashnowords/blogs 原文地址:https://nodejs.org/en/d ...

  2. 使用node.js将xmind导出的excel转换为json树

    xmind文件如图所示, 最终生成的数据结构如图  2,选择导出为excel文件,导出的excel文件打开如图 3,安装node读取excel模块 cnpm i  node-xlsx --save 4 ...

  3. mysql-常用组件之定时器

    定时器主要用于定时的执行一次或者循环执行一条sql,在实际场景上,例如,定期清理数据表,定期导出日志文件等等场景.本次公司晚上维护系统,晚上需要定期挂维护页,用到了定时器,这里简单总结一下. 启用定时 ...

  4. docker tomcat镜像部署springbootwar包

    springboot打war包 1.在pom文件中增加插件 <build> <finalName>xx</finalName> <plugins> &l ...

  5. luogu P3913 车的攻击 |数学

    题目描述 N×N 的国际象棋棋盘上有KK 个车,第ii个车位于第R_i行,第C_i列.求至少被一个车攻击的格子数量. 车可以攻击所有同一行或者同一列的地方. 输入格式 第1 行,2 个整数N,K. 接 ...

  6. Java修炼——内部类详解

    内部类详解 定义:将一个类定义在另一个类的内部,该类就称为内部类 类中定义的内部类特点: 内部类作为外部类的成员,可以直接访问外部类的成员 (包括 private 成员),反之则不行. 内部类做为外部 ...

  7. HDU1848 Fibonacci again and again(SG 函数)

    任何一个大学生对菲波那契数列(Fibonacci numbers)应该都不会陌生,它是这样定义的: F(1)=1; F(2)=2; F(n)=F(n-1)+F(n-2)(n>=3); 所以,1, ...

  8. UESTC-1963咸鱼咕咕咕(二分图匹配)

    咸鱼咕咕咕 Time Limit: 1000 MS     Memory Limit: 64 MB Submit Status 咸鱼有个咕咕笼. 咕咕笼可以划分成m×nm×n个格子,每个小格子可以放下 ...

  9. processing-python-泡泡龙

    挂一个无耻搬运工:码农教程. 真的打心底里瞧不起为了蹭热度全网照抄代码的某些人. 再次此声明:代码不是python语言,求某些搬运工不要到处搬运害人. def setup(): size(600,60 ...

  10. 代码检查又一利器：ArchUnit

    Code Review总是让人又爱又恨,它可以帮助我们在提测之前发现很多代码中比较"丢人"的问题,但是,Code Review通常会比写代码更加耗费精力,因为你需要理解别人的代码, ...