JS的排他思想及tab栏切换
一.排他思想
- 含义: 关于排他思想,我的理解就是先排除掉其他的(包括自己) ,最后再给自己(this)加想要的效果。
- 小思路:
a. 通过document.ElementsBytagName();选择需要的一类标签,获得一个伪数组
b.由于是伪数组的原因,而对数组的处理最多的是遍历,所以会用到for(); 通过循环可以排除掉其他(包括自己)
c.遍历后可以用this改变自己的样式
- 小tips:自定义属性
就像c语言一样,数组都会有下标(索引号),在遍历伪数组的时候就可以利用自定义属性记录它的索引号,如下 arr[i].index=i;
- 代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style> .bianse{ background-color: pink; } </style> <script> window.οnlοad=function(){ var buts=document.getElementsByTagName("button"); for (var i=0;i<buts.length;i++) { buts[i].index=i;//记录索引号 buts[i].οnclick=function(){ // alert(this.index);在这验证了索引号 for(var i=0;i<buts.length;i++) { //排除所有 buts[i].className=""; } this.className="bianse"; //给自己加样式 } } } </script> <body> <button>点击后变色</button> <button>点击后变色</button> <button>点击后变色</button> <button>点击后变色</button> <button>点击后变色</button> <button>点击后变色</button> <button>点击后变色</button> </body> </html>
二. Tab栏切换
- 小原理:
最外面一个大盒子,里面的上面一个盒子放按钮,下面一个盒子放divs,上下个数对应。点击按钮,按钮颜色变且相应的盒子出现。
- 小思路:
3. 代码通过document.ElementsBytagName();获取两个伪数组,上面按钮的和下面对应divs的,循环里记录按钮的索引号,先使所有盒子隐藏但第一个显示,利用两次排他思想(可以合并为一次)改变按钮颜色和显示对应的盒子。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
input{
outline: none;
}
#tab{
width: 500px;
margin: 100px auto;
}
#buttom div{
width: 100%;
height: 300px;
background-color: pink;
display: none;
}
</style>
<script>
window.οnlοad=function(){
var buts=document.getElementsByTagName("input");
var divs=document.getElementById("buttom").getElementsByTagName("div");
//两个数组的长度 alert(buts.length); alert(divs.length);
//换掉按钮的颜色
for (var i=0;i<buts.length;i++) {
buts[i].index=i;//记住索引号
buts[i].οnclick=function(){
for (var i=0;i<buts.length;i++) {//排他思想
buts[i].style.backgroundColor="";
}
this.style.backgroundColor="red";
for(var j=0;j<divs.length;j++)
{
divs[j].style.display="none";
}
divs[this.index].style.display="block";
//上面两个for可以合并
}
}
}
</script>
</head>
<body>
<div id="tab">
<div id="top">
<input type="button" name="" id="" value="按钮1" />
<input type="button" name="" id="" value="按钮2" />
<input type="button" name="" id="" value="按钮3" />
<input type="button" name="" id="" value="按钮4" />
<input type="button" name="" id="" value="按钮5" />
</div>
<div id="buttom">
<div style="display: block;">第1个盒子</div>
<div>第2个盒子</div>
<div>第3个盒子</div>
<div>第4个盒子</div>
<div>第5个盒子</div>
</div>
</div>
</body>
</html>
4. 效果
但是直接把上面的代码体复制成多个tab栏时就会出现如下错误:
这是因为每个tab栏之间没有区分点,会互相影响。所以下面5做出了改进。
5. 多个tab栏:
多个tab栏切换时需要用大盒子的id区分来封装函数,代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
body{
font-size: 20px;
}
.box{
width: 450px;
margin: 0 auto;
border: 1px solid red;
}
.mt{
font-size: 0;/*去除display:inline-block中的间隙*/
-webkit-text-size-adjust:none;/*谷歌*/
}
.mt span{
display: inline-block;
/*background-color: pink; 权重是100+1=101*/
width: 90px;
cursor: pointer;
font-size: 20px;
text-align: center;
}
.mb ul{
list-style-type: none;
}
.mb li{
width: 100%;
height: 250px;
background-color: plum; /*权重是100+1+1=102*/
display: none;
}
.mt span.now{
background-color: plum; /*权重应大于102*/
}
.mb li.nowbl{
display: block;
}
</style>
<script>
window.οnlοad=function(){//多个Tab栏切换,应该用大盒子的id区分,封装函数
function bigbox(bigid){
var bigid=document.getElementById(bigid);//大盒子的id
var spans=bigid.getElementsByTagName("span");
var lis=bigid.getElementsByTagName("li");
for(var i=0;i<spans.length;i++)
{
spans[i].index=i;
spans[i].οnmοuseοver=function(){
//排他思想
for(var j=0;j<spans.length;j++)
{//干掉所有的
spans[j].className="";
lis[j].className="";
}
//再给自己(this)赋值
this.className="now";
//alert(this.index); 此时鼠标经过的索引号为this.index
lis[this.index].className="nowbl";
}
}
}
bigbox("one");
bigbox("two");
bigbox("three");
bigbox("four");
}
</script>
</head>
<body>
<div class="box" id="one">
<div class="mt">
<span class="now">新闻</span>
<span>娱乐</span>
<span>搞笑</span>
<span>在线</span>
<span>直播</span>
</div>
<div class="mb">
<ul>
<li class="nowbl">新闻模块</li>
<li>娱乐模块</li>
<li>搞笑模块</li>
<li>在线模块</li>
<li>直播模块</li>
</ul>
</div>
</div>
<div class="box" id="two">
<div class="mt">
<span class="now">新闻</span>
<span>娱乐</span>
<span>搞笑</span>
<span>在线</span>
<span>直播</span>
</div>
<div class="mb">
<ul>
<li class="nowbl">新闻模块</li>
<li>娱乐模块</li>
<li>搞笑模块</li>
<li>在线模块</li>
<li>直播模块</li>
</ul>
</div>
</div>
<div class="box" id="three">
<div class="mt">
<span class="now">新闻</span>
<span>娱乐</span>
<span>搞笑</span>
<span>在线</span>
<span>直播</span>
</div>
<div class="mb">
<ul>
<li class="nowbl">新闻模块</li>
<li>娱乐模块</li>
<li>搞笑模块</li>
<li>在线模块</li>
<li>直播模块</li>
</ul>
</div>
</div>
<div class="box" id="four">
<div class="mt">
<span class="now">新闻</span>
<span>娱乐</span>
<span>搞笑</span>
<span>在线</span>
<span>直播</span>
</div>
<div class="mb">
<ul>
<li class="nowbl">新闻模块</li>
<li>娱乐模块</li>
<li>搞笑模块</li>
<li>在线模块</li>
<li>直播模块</li>
</ul>
</div>
</div>
</body>
</html>
效果: