jq實現的tab小demo
阿新 • • 發佈：2019-02-16
一：體會
- 雖然只是一個很小的demo，但途中卻遇到很多問題，問題都很小但是卻很難發現，解決過程很是惱火，偶爾靈光一閃卻又想了起來，而且混淆了很多jq和原生js中的方法，分不清楚哪個是jq中的，哪個是原生js中的，有很多東西都看過，但是卻又很多細節不清楚，做東西時很容易發生問題並且半天發現不了，要是有過目不忘的本領就好了~~
二：查詢知識點
- 不是jq物件無法使用jq庫中的方法，比如下列程式碼中的boxs[i],不要將其轉化為jq物件$(boxs[i])才能使用方法show()
- 在for迴圈中使用let宣告的變數只在本輪迴圈有效，每一次迴圈的變數都是一個新的變數，可以迴圈閉包中變數i的問題，也在下面程式碼中有體現
- 陣列也具有indexOf方法，例如：arr.indexOf(“a”);返回”a”在陣列中第一次出現的位置
- 原生js中繫結點選事件方法：.onclick = function(){}; jq中繫結點選事件方法：.click(function(){});或者使用.on() 方法
- 事件冒泡和事件捕捉的區別：父級元素和子級元素都綁定了click事件，如果點選了子級元素，父級元素和子級元素都會觸發click事件
- 事件捕捉：父元素先觸發，子元素後觸發
- 事件冒泡：子元素先觸發，父元素後觸發
- this的指向由執行時指定，而不是編寫時指定，箭頭函式相反
- jq中的eq有兩種用法： 1. :eq(index)選擇器用法，2. .eq(index)函式用法，都是獲取相應index位置的元素
- jq中的index()方法，不傳引數index()用法，獲取相應元素在同胞元素的位置，傳參
().index(element)用法，獲取element元素在 (selector)中的位置，element為相應的jq和dom選擇器 - .sibings()獲取相應元素的同胞元素，還可以新增選擇器限制相應選擇器的同胞元素.sibings(selector)
- mouseover與mouseenter的區別：
- 不論滑鼠指標穿過被選元素或其子元素，都會觸發 mouseover 事件。
- 只有在滑鼠指標穿過被選元素時，才會觸發 mouseenter 事件。
mouseout與mouseleave同理
三：程式碼
html程式碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>tab選項卡</title>
<link rel="stylesheet" href="css/tab.css" />
</head>
<body>
<div class="main">
<ul class="tab_nav">
<li class="tab select">HTML</li>
<li class="tab unsel">CSS</li>
<li class="tab unsel">JS</li>
<li class="white">空白</li>
</ul>
<div class="tab_content">
<div class="box1">我負責網頁結構。</div>
<div class="box2 hide">我負責網頁樣式。</div>
<div class="box3 hide">我負責網頁特效。</div>
</div>
</div>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/tab.js"></script>
</body>
</html>css程式碼：
body,ul,li,div{
margin:0px;
padding:0px;
}
ul,li{
list-style: none;
}
ul:after{
content:"";
display: block;
clear:both;
}
li{
float:left;
padding:5px;
}
.main{
padding:20px;
border:1px solid #bbb;
width:280px;
margin:100px auto 0;
}
.tab_nav .select{
border-top:1px solid #bbb;
border-left:1px solid #bbb;
border-right:1px solid #bbb;
}
.tab_nav .unsel{
border-bottom:1px solid #bbb;
}
.tab_nav .white{
text-indent: -9999em;
width:100px;
border-bottom:1px solid #bbb;
}
.tab_nav .tab{
width:46px;
text-align: center;
box-sizing;content-box;
}
.tab_content div{
padding-top:10px;
height:50px;
}
.tab_content .hide{
display: none;
}
javascript程式碼：
$(function(){
var tabs = $(".main .tab_nav .tab");
var boxs = $(".main .tab_content div");
for(let i in tabs){
tabs[i].onclick = function(){
$(this).addClass("select").removeClass("unsel").siblings().addClass("unsel").removeClass("select");
$(boxs[i]).show().siblings().hide();
};
};
});四：demo效果圖
如果有問題，或者有好的意見，可以在下面給我評論，我還是個noob.