js进阶 11-22/23 js如何实现选项卡
js进阶 11-22/23 js如何实现选项卡
一、总结
一句话总结：通过索引把选项卡头的li标签和选项卡内容的div标签联系在一起，通过控制div标签的display属性可以实现选项卡的选项切换。
1、某些样式设置了，但是出不来效果的原因可能是什么？
优先级会导致某些特效出不来
现在设置的优先级低于之前的
可以通过加父标签的方式来增加优先级
2、如何增加样式的优先级？
可以通过加父标签的方式来增加优先级
3、如何实现一组标签中点某个标签，这个标签的样式改变？
动态给点的标签添加一个自己写好的激活样式
71 oli[this.index].className="active";
4、如何消除一个元素的所有类？
dom对象的className赋空值
67 oli[j].className="";
5、如何让一个隐藏的元素显示？
将dom对象的style的display属性设置为none
68 li_content[j].style.display='none'
6、如何获取一个id为content的div里面的另外的div？
getElement的链式写法（因为getElement是document的方法，其实也是dom对象的方法）
57 var li_content= document.getElementById('content').getElementsByTagName('div')
二、js如何实现选项卡
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>选项卡2</title>
6 <style>
7 *{margin:0px;padding: 0px }
8 body{padding: 50px}
9 #list{10 list-style-type: none;
11 height: 30px;
12 font-size: 14px
13 }
14 #list li{15 width: 80px;
16 margin-right: 5px;
17 height: 30px; line-height: 30px;
18 text-align: center;
19 border: solid green 1px;border-bottom: none;
20 border-radius: 5px 5px 0 0;
21 float: left;
22 cursor: pointer;
23 }
24 #content div{25 width: 400px;
26 height: 150px;
27 border:1px solid green;
28 display: none;
29 background: rgba(100,50,20,0.2);
30 }
31 #content div.show{display: block;}
32 #list li:hover{33 background: rgba(100,50,20,0.4);
34 }
35 .active{background: rgba(100,50,20,0.2);}
36 </style>
37 </head>
38 <body>
39 <div id="tab">
40 <ul id="list">
41 <li class="active">第一部分</li>
42 <li>第二部分</li>
43 <li>第三部分</li>
44 </ul>
45 <div id="content">
46 <div class="show">JS进阶......</div>
47 <div>JQ精讲......</div>
48 <div>JS+JQ+CSS3特效、技巧、案例专题......</div>
49 </div>
50 </div>
51 <script>
52 // var list=document.getElementById('list')
53 // var content=document.getElementById('content')
54 // var oli=list.getElementsByTagName('li')
55 // var li_content= content.getElementsByTagName('div')
56 var oli=document.getElementById('list').getElementsByTagName('li')
57 var li_content= document.getElementById('content').getElementsByTagName('div')
58 for(var i=0;i<oli.length;i++){
59 oli[i].index=i
60 oli[i].onclick=function(){
61
62 //首先获取到当前被点击li的索引
63 //alert(this.index)
64
65 //点击后让相应的div显示到当前
66 for(var j=0;j<li_content.length;j++){
67 oli[j].className="";
68 li_content[j].style.display='none'
69 }
70 li_content[this.index].style.display='block';
71 oli[this.index].className="active";
72
73 }
74 }
75 </script>
76 </body>
77 </html>转载于:https://www.cnblogs.com/Renyi-Fan/p/9248631.html
js进阶 11-22/23 js如何实现选项卡相关推荐
- js进阶 13-5 jquery队列动画如何实现
js进阶 13-5 jquery队列动画如何实现 一.总结 一句话总结:同一个jquery对象,直接写多个animate()就好. 1.什么是队列动画? 比如说先左再下,而不是左下一起走 2.怎么实现 ...
- js进阶 10-8 伪类选择器有哪几类（自己不用，永远不是自己的）
js进阶 10-8 伪类选择器有哪几类(自己不用,永远不是自己的) 一.总结 一句话总结:自己不用,永远不是自己的. 0.学而不用,却是为何? 自己不用,永远不是自己的,有需求的时候要想到它,然后操作 ...
- js进阶正则表达式15验证身份证号（|符号的使用：var reg=/^\d{17}[\d|X]$|^\d{15}$/）（str的方法substr）...
js进阶正则表达式15验证身份证号(|符号的使用:var reg=/^\d{17}[\d|X]$|^\d{15}$/)(str的方法substr) 一.总结 1.|符号的使用:var reg=/^\d ...
- js进阶课程 12-9 jquery的事件对象event的方法有哪些？
js进阶课程 12-9 jquery的事件对象event的方法有哪些? 一.总结 一句话总结:三组六个,阻止默认事件一组,阻止冒泡一组,阻止冒泡和剩余事件一组. 1.事件的默认动作指什么? 比如点a标 ...
- js进阶 13-6 jquery动画效果相关常用函数有哪些
js进阶 13-6 jquery动画效果相关常用函数有哪些 一.总结 一句话总结:animate(),stop(),finish(),delat()四个. 1.stop()方法的基本用法是什么(sto ...
- js进阶 12-1 jquery的鼠标事件有哪些
js进阶 12-1 jquery的鼠标事件有哪些 一.总结 一句话总结:1+3*2+1+1,其中里面有两组移入移出,一组和click,总结就是click(3个),hover(5个),mousemove ...
- js进阶正则表达式方括号（方括号作用）（js正则是在双正斜杠之中：/[a-z]/g）...
js进阶正则表达式方括号(方括号作用)(js正则是在双正斜杠之中:/[a-z]/g) 一.总结 方括号:范围 圆括号:选 大括号:数量 1.js正则是在双正斜杠之中: var reg2=/[a-z]/ ...
- js进阶 12-8 如何知道鼠标和键盘当前操作的是哪个键
js进阶 12-8 如何知道鼠标和键盘当前操作的是哪个键 一.总结 一句话总结:event.which属性. 1.如何获取事件发生的时间? timeStamp属性 event.timeStamp 属性 ...
- js进阶 11-16 jquery如何查找元素的父亲、祖先和子代、后代
js进阶 11-16 jquery如何查找元素的父亲.祖先和子代.后代 一.总结 一句话总结:过滤或者查找的方法里面可以带参数进行进一步的选择. 1.parent()和parents()方法的区别是什 ...
最新文章
- python3.x与python2.x的区别汇总
- Visual Studio找不到iOS模拟器
- LeetCode Sudoku Solver
- 题目1183：守形数
- mysql数据库扫描_使用nmap对mysql 数据库进行扫描
- 【Android Studio安装部署系列】十八、Android studio更换APP应用图标
- 简单的C++线程类实现, windows平台
- 究竟哪种取数据的方式最快?
- 全球第三大芯片制造商GlobalFoundries透露上市计划 或在2022年
- O365（世纪互联）SharePoint 之使用Designer报错
- (day 21 - 辅助栈加模拟)剑指 Offer 31. 栈的压入、弹出序列
- Linux内核学习笔记一
- 【R语言】如何直接调取Wind、iFinD数据接口教程
- Power BI DAX: FILTER函数使用多个条件筛选数据
- android 音乐扬声器,android安插耳机状态使用扬声器外放音乐
- 公司测试用例评审的简单介绍
- dbus-1 not met问题
- lsdyna如何设置set中的node_list_如何快速掌握es6+新特性及核心语法？
- c语言谢旻吕俊张军强答案,吕俊|
- Python数据分析习题（基于pandasnumpy模块）（上）