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. 区块链学习笔记：D02 区块链的技术发展历史和趋势

    对于区块链的技术发展历史,其实在我的印象中也就对比特币有所了解,也听过什么火币之类的玩意,但是具体是什么.怎么运作的就不清楚了... 这次的内容首先是讲解了区块链的技术演进,一张图一目了然,虽然里面涉 ...

  2. eclipse color theme 离线安装方法以及jar包

    1.    用户可以点击下载eclipse-color-theme-update-site.zip或者下载我已经下载好的color jar包 2.    把文件com.github.eclipseco ...

  3. oracle开启关闭日志归档

    oracle归档日志开启之后,会产生大量的日志,需要定时清理以及不重要的数据库可以不开启归档模式,下面介绍一下oracle归档开启.关闭以及日志的删除:一.oracle归档日志开启及关闭1.登录服务端 ...

  4. luogu P3572 [POI2014]PTA-Little Bird |单调队列

    从1开始,跳到比当前矮的不消耗体力,否则消耗一点体力,每次询问有一个步伐限制,求每次最少耗费多少体力 #include<cstdio> #include<cstring> #i ...

  5. 2017 CCPC秦皇岛 M题 Safest Buildings

    PUBG is a multiplayer online battle royale video game. In the game, up to one hundred players parach ...

  6. webpack(四) --css样式及图片打包

    一.CSS样式打包 1. loader简介 由于Webpack打包入口目前只配置了一个index.js文件,那么其他需要被打包的文件都必须通过模块化方式引入该文件才行,而默认情况下,引入的文件必须是j ...

  7. python sympy evalf()函数

    SymPy是一个符号计算的Python库.它的目标是成为一个全功能的计算机代数系统,同时保持代码简 洁.易于理解和扩展.它完全由Python写成,不依赖于外部库.SymPy支持符号计算.高精度计算.模 ...

  8. Python深入之python内存管理机制（重点）

    前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者:醍醐三叶   关于python的存储问题, (1)由于python中 ...

  9. CSS——overflow的参数以及使用

    学习网站:https://developer.mozilla.org/zh-CN/docs/Web/CSS/overflow

  10. Java获取配置文件中的属性

    获取配置文件的属性值 example 目标配置文件jdbc.properties,现想要在java类里面调用opcl的url jdbc.url=jdbc:mysql://localhost:3306/ ...