js实现tab栏的切换

实现点击变色效果：

点击之后下面的内容跟着变化

全部代码：

最后：

界面效果图如上，点击第二栏后第二栏变为红色，下面显示第二栏的内容。

html代码：如下

<header class="w"><ul><li>商品介绍</li><li>规格与包装</li><li>售后保障</li><li>商品评价</li><li>手机社区</li></ul><div class="tab_cont"><div class="item" style="display: block;">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div></div></header>

实现点击变色效果：

1.写一个current属性，把背景颜色改为红色，字体改为白色。

.current
{/*背景变红*/background-color: red;/* 字体变白 */color: white;
}

2.要使每一个li标签点击后变色，只需要用js代码找到点击的li标签，并给对应的li标签加上current属性便可以实现变色效果。

<script>// 找到tab栏标题的每一项li存到tab数组中var tab = document.querySelector('ul').querySelectorAll('li');// 使用for循环给tab数组每一项设置监听for(var i = 0;i<tab.length;i++){tab[i].onclick = function(){// 排他思想,把所有元素属性清空for(var j=0;j<tab.length;j++)tab[j].className='';// 点击后把current属性加上this.className='current';}}</script>

3.排它思想：先把所有元素的属性清空，在给目前点击的元素设置对应的属性。这样可以保证点击的时候只有点击到的元素有变色效果。

点击之后下面的内容跟着变化

1.先给所有div元素设置隐藏，由于要让第一个内容模块一开始就显示，所以要给第一个内容模块先设置可见，采用行内样式直接设置。

.item
{display: none;
}

2.由于要让所有li元素于div元素对应起来，所以采用自定义元素给li设置一个值，在for循环内利用i来设置，之后在onclick方法内获取到对应的index属性值，setAttribute方法第一个参数是自定义属性名，第二个是自定义属性的值。

// 用js数组给items设置一个自定义属性，tab数组的每一项与之对应
tab[i].setAttribute("index",i);

3.排他思想：一旦点击li就让对应的div元素显示，其他div元素隐藏

        // 找到内容栏的每一项var items = document.querySelector('.tab_cont').querySelectorAll('div');// 使用for循环给tab数组每一项设置监听for(var i = 0;i<tab.length;i++){// 用js数组给items设置一个自定义属性，tab数组的每一项与之对应tab[i].setAttribute("index",i);// 给所有按钮设置监听tab[i].onclick = function(){// 排他思想,把所有元素属性清空for(var j=0;j<tab.length;j++)tab[j].className='';// 点击后把current属性加上this.className='current';var index=this.getAttribute('index');for(var k=0;k<items.length;k++)items[k].style.display="none";items[index].style.display='block';}}

这样就可以实现tab栏和内容的切换了

全部代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>*
{margin: 0;padding: 0;border: 0;
}
body
{position: relative;
}
header
{background-color: aquamarine;
}
.w
{width: 700px;margin: 0 auto;
}
header>ul li
{padding: 5px 30px;height: 30px;display: inline-block;list-style: none;
}
header ul
{background-color: rgb(248, 248, 248);border-bottom:orange solid 2px;
}
.item
{display: none;
}
.current
{/*背景变红*/background-color: red;/* 字体变白 */color: white;
}</style>
</head>
<body><header class="w"><ul><li>商品介绍</li><li>规格与包装</li><li>售后保障</li><li>商品评价</li><li>手机社区</li></ul><div class="tab_cont"><div class="item" style="display: block;">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div></div></header><script>// 找到tab栏标题的每一项存到tab数组中var tab = document.querySelector('ul').querySelectorAll('li');// 找到内容栏的每一项var items = document.querySelector('.tab_cont').querySelectorAll('div');// 使用for循环给tab数组每一项设置监听for(var i = 0;i<tab.length;i++){// 用js数组给items设置一个自定义属性，tab数组的每一项与之对应tab[i].setAttribute("index",i);// 给所有按钮设置监听tab[i].onclick = function(){// 排他思想,把所有元素属性清空for(var j=0;j<tab.length;j++)tab[j].className='';// 点击后把current属性加上this.className='current';// 找到目前点击的li元素的下标var index=this.getAttribute('index');// 排它思想for(var k=0;k<items.length;k++)items[k].style.display="none";// 把于li元素同样下标的div元素显示items[index].style.display='block';}}</script>
</body>
</html>

最后：

第一篇博客，是在自己离开软协后写的，希望通过这种方式记录自己的学习过程吧，更是督促自己不要堕落下去，不要忘了自己是个学生。虽然很简单，但是那怕只是学了一点，每天也会进步一点。