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. 使用app测试Modelarts在线服务

    1. 基础准备 本demo代码已上传github地址为 https://github.com/zxzxzxygithub/hwmodelartdemo clone下来之后导入android studi ...

  2. virtualenv 在windows下的简单应用

    https://docs.python.org/zh-cn/3/tutorial/venv.html cmd下的操作: pip  install virtualenv pip install virt ...

  3. 如何在Android手机上进行自动化测试（上）

    版权声明:允许转载,但转载必须保留原链接:请勿用作商业或者非法用途 前言 通过阅读本节教程,你将了解到以下内容: 如何在脚本代码中.运行脚本时指定手机 如何填写--device Android:/// ...

  4. shell 往文件中添加一列一样的字符串

    例如:往文件file.txt中,添加一列字符串"20161020", 用制表符分割 awk '$0=$0"\t20161020"' file.txt

  5. springboot执行延时任务-DelayQueue的使用

    DelayQueue简介 在很多场景我们需要用到延时任务,比如给客户异步转账操作超时后发通知告知用户,还有客户下单后多长时间内没支付则取消订单等等,这些都可以使用延时任务来实现. jdk中DelayQ ...

  6. docker tomcat镜像部署springbootwar包

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

  7. 压缩感知重构算法之CoSaMP算法python实现

    压缩感知重构算法之OMP算法python实现 压缩感知重构算法之CoSaMP算法python实现 压缩感知重构算法之SP算法python实现 压缩感知重构算法之IHT算法python实现 压缩感知重构 ...

  8. jQuery中的基本的选择器学习(补充版)

    先看整体代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <t ...

  9. HDU5343 MZL's Circle Zhou(SAM+记忆化搜索)

    Problem Description MZL's Circle Zhou is good at solving some counting problems. One day, he comes u ...

  10. ARTS-S pytorch用c++实现推理

    训练的代码,以cifar为例 # -*- coding: utf-8 -*- import torch import torchvision import torchvision.transforms ...