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. C#DateTime格式转换全介绍

    DateTime与字符串转换: DateTime()与转换为字符串主要依靠DateTime().ToString(string format) 函数,以我的理解,参数format大体分为单个字母和多个 ...

  2. luogu P1650 田忌赛马 |贪心

    题目描述 我国历史上有个著名的故事: 那是在2300年以前.齐国的大将军田忌喜欢赛马.他经常和齐王赛马.他和齐王都有三匹马:常规马,上级马,超级马.一共赛三局,每局的胜者可以从负者这里取得200银币. ...

  3. 解决pyinstaller在单一文件时无法正确添加权限清单问题,(UAC,uac_admin,manifest,asInvoker,python,requireAdministrator)

    做了3天的win10的兼容性测试,大部分时间都卡权限获取这了. 以下废话很多,想直接找解决方法,请跳至红字 首先,简单说下uac,自vista后windows再次加严了权限管理,uac (账户控制) ...

  4. numpy的基本API(三)——索引

    numpy的基本索引API iwehdio的博客园:https://www.cnblogs.com/iwehdio/ 1.单个元素的索引 对于一维数组,索引方式与内置的List相同.正索引从0开始,负 ...

  5. 基于FPGA+USB2.0的图像采集系统测试小结-mt9m001

    基于FPGA+USB2.0的图像采集系统测试小结-mt9m001 该系统采用层层惊涛出品的FPGA_VIP_USB_V102板卡测试 板卡分为:核心板.底板.摄像头板 核心板采用:ep4ce10e22 ...

  6. 02 | Java内存模型:看Java如何解决可见性和有序性问题

    什么是 Java 内存模型? 导致可见性的原因是缓存,导致有序性的原因是编译优化,那解决可见性. 有序性最直接的办法就是禁用缓存和编译优化,但是这样问题虽然解决了,我们程序的性能可就堪忧了.   合理 ...

  7. JVM垃圾收集器CMS和G1

    CMS(Concurrent Mark Sweep)收集器是一种以获取 最短回收停顿时间 为目标的收集器.采用的是"标记-清除算法",整个过程分为4步 由于整个过程中,并发标记和并 ...

  8. CCPC Wannafly Winter Camp Div2 部分题解

    Day 1, Div 2, Prob. B - 吃豆豆 题目大意 wls有一个\(n\)行\(m\)列的棋盘,对于第\(i\)行第\(j\)列的格子,每过\(T[i][j]\)秒会在上面出现一个糖果, ...

  9. Java逆向之UML查看工具(检索记录)

    花了几个钟头时间,搜索了一下,如何从源代码得到UML,因为WCI(Writing Compilers and Interpreters,下同)越往后代码越多,必须得借助工具才能把握整个工程了.初次涉猎 ...

  10. Docker常用命令-全

    原文内容来自于LZ(楼主)的印象笔记,如出现排版异常或图片丢失等问题,可查看当前链接: https://app.yinxiang.com/shard/s17/nl/19391737/9f6bf39e- ...