深入淺出jquery中tab選項卡之常用方法siblings用法
我之前說過，我在寫tab選項卡這一思路上遇到closest用法問題上，今天我還是想談談關於jquery中tab選項卡經常用到的方法-siblings的用法
我還是以實驗的方式來幫助大家理解，因為牛頓曾經說過，例子比概念重要，
先看我的第一個實驗
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="../../js/jquery.js"></script>
</head>
<body>
<div><span>Hello</span></div>
<p class="selected">Hello Again</p>
<p>And Again</p>
<script>
$("p").siblings().css("background", "yellow");
</script>
</body>
</html>
你會發現全部變黃了，為什麼不是同胞才有作用嗎？這時你要聯想到你已經學過的css的知識繼承性，因為san繼承了div的css屬性。
那麼現在我們做第二個實驗
把$("p").siblings(".selected").css("background", "yellow");
程式碼如下:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="../../js/jquery.js"></script>
</head>
<body>
<div><span>Hello</span></div>
<p class="selected">Hello Again</p>
<p>And Again</p>
<script>
$("p").siblings(".selected").css("background", "yellow");
</script>
</body>
</html>
實驗結果：第二個p變黃了，
現在我們再進行第三次實驗:
把div裡面放入class="selected"
程式碼如下:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="../../js/jquery.js"></script>
</head>
<body>
<div class="selected"><span>Hello</span></div>
<p class="selected">Hello Again</p>
<p>And Again</p>
<script>
$("p").siblings(".selected").css("background", "yellow");
</script>
</body>
</html>
結論:前面兩個變黃
看完以上實驗，你是否明白siblings意思，
為什麼要理解他的用法？
因為輪播圖的4個點都是同胞，以及輪播的圖片也是同胞，
tab選項卡的四個上面導航的東也是同胞，下面內容也是同胞
我們在支付寶看一列列下來得東東都是同胞，這說明如果你的專案是用jquery寫的你必然會用到它。