南寧小程序開發公司：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