南宁小程序开发公司：www.zkelm.com
尽管每天都学一点，但是感觉进步还是有点慢。慢吞吞的有点像乌龟，咋搞咋搞，要达到目标值，好像时间挺不够用。
穷是原罪，菜是原罪. 好吧 先学起来在说了，反正只要进步 就是好事！
今天要做得就是Tad分栏。一个很使用的小组件功能， 纯JS操作，确实也是必备能力之一！前端的常用组件。
1.要先有一定的css 布局基础 ，小组件需要的东西，其实是一种综合性的，如果没有对css 和js理解的话 看起来估计有点小难度，
废话不多说，我们先做一个box 放入几个li
<div class="box">
<ul>
<li><a href="">小程序开发</a></li>
<li><a href="">企业oa开发</a></li>
<li><a href="">网站开发</a></li>
<li><a href="">公众号开发</a></li>
</ul>
<div class="items">
<div class="item">这里是小程序开发：www.zkelm.com</div>
<div class="item">这里是企业oa开发：www.zkelm.com</div>
<div class="item">这里是网站开发：www.zkelm.com</div>
<div class="item">这里是公众号开发：www.zkelm.com</div>
</div>
</div>
显示的效果如下：
接下来我们美化一下！
ul{
list-style-type: none;
display: flex;
background-color: #ccc;
margin: 0;
padding: 0;
}
ul li a{
text-decoration:none;
display: block;
width:60px;
height: 30px;
background-color: #888;
line-height: 30px;
text-align:center;
color:#eee;
border: none;
}
ul li{
margin:1px;
border: none;
}
.items{
border:1px solid #ccc;
height: 100px;
border-top:None;
background-color: #EEEEEE;
padding: 5px;
}
.item{
display: none;
}
.enter{
background-color: #EEEEEE;
color:#000000;
}
.myshow{
display: block;
}
显示效果如下
思路：1.先写 ul li 里面的 点击事件
//获取全部A元素，他的效果是alist[0]=a(首页) alist[1]=a(其它)
var alist=document.querySelector("ul").querySelectAll("a");
//获取底部的 div （内容）。并存储在数组中一一对应 divlist[0]=div1 divlist[1]=div2
var divlis=document.querySelector(".items").querySelectorAll("item");
//给每个A添加onclick事件
for(var i=0;i<alist.length;i++){
alist[i].onclick=function(){
//首先，点击的时候就把for所有的元素a标签都换成统一风格
for(var m=0;m<alist.length;m++){
//排他性
alist[m].className=""
}
//排除其他的风格后 ，只标注自己
alist[i].className="enter"
}
}
运行的代码就是这样子的
2.第二步： 点击的时候让底下的div 依次显示他的内容，其余的全部隐藏 所以js的代码改成！
<script type="text/javascript">
var alist=document.querySelector("ul").querySelectorAll("a");
var itemlist=document.querySelector(".items").querySelectorAll(".item");
for(var i=0;i<alist.length;i++){
alist[i].onclick=function(){
for(var m=0;m<alist.length;m++){
alist[m].className="";
itemlist[m].className="item";
}
this.className="enter";
var idex=this.getAttribute("index");
//itemlist[idex].className="myshow";
}
alist[i].setAttribute("index",i);
}
</script>
这里做重点的讲解： alist[i].setAttribute(“index”,i)
会在 a标签之中加入属性 index、 然后 点击的时候 读取他的属性 index的值， 用来做 items 里面的item定位显示
如图 divlist[0]=小程序开发：www.zkelm.com
divlist[1]=企业oa开发：www.zkelm.com
divlist[1]=网站建设：www.zkelm.com
divlist[1]=公众号开发：www.zkelm.com
完整的代码如下：
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tab分栏制作</title>
<style>
ul{
list-style-type: none;
display: flex;
background-color: #ccc;
margin: 0;
padding: 0;
}
ul li a{
text-decoration:none;
display: block;
width:100px;
height: 30px;
background-color: #888;
line-height: 30px;
text-align:center;
color:#eee;
border: none;
}
ul li{
margin:1px;
border: none;
}
.items{
border:1px solid #ccc;
height: 100px;
border-top:None;
background-color: #EEEEEE;
padding: 5px;
}
.item{
display: none;
}
.enter{
background-color: #EEEEEE;
color:#000000;
}
.myshow{
display: block;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li><a href="#">小程序开发</a></li>
<li><a href="#">企业oa开发</a></li>
<li><a href="#">网站开发</a></li>
<li><a href="#">公众号开发</a></li>
</ul>
<div class="items">
<div class="item">这里是小程序开发：www.zkelm.com</div>
<div class="item">这里是企业oa开发：www.zkelm.com</div>
<div class="item">这里是网站开发：www.zkelm.com</div>
<div class="item">这里是公众号开发：www.zkelm.com</div>
</div>
</div>
</body>
<script type="text/javascript">
var alist=document.querySelector("ul").querySelectorAll("a");
var itemlist=document.querySelector(".items").querySelectorAll(".item");
for(var i=0;i<alist.length;i++){
alist[i].onclick=function(){
for(var m=0;m<alist.length;m++){
alist[m].className="";
itemlist[m].className="item";
}
this.className="enter";
var idex=this.getAttribute("index");
//itemlist[idex].className="myshow";
}
alist[i].setAttribute("index",i);
}
</script>
</html>
每天进步1% 争取不堕落。广西小程序开发：www.zkelm.com