這篇文章主要介紹“jQuery siblings()怎么使用”的相關知識,小編通過實際案例向大家展示操作過程,操作方法簡單快捷,實用性強,希望這篇“jQuery siblings()怎么使用”文章能幫助大家解決問題。
建網(wǎng)站原本是網(wǎng)站策劃師、網(wǎng)絡程序員、網(wǎng)頁設計師等,應用各種網(wǎng)絡程序開發(fā)技術和網(wǎng)頁設計技術配合操作的協(xié)同工作。創(chuàng)新互聯(lián)建站專業(yè)提供成都網(wǎng)站制作、網(wǎng)站設計、外貿(mào)網(wǎng)站建設,網(wǎng)頁設計,網(wǎng)站制作(企業(yè)站、成都響應式網(wǎng)站建設公司、電商門戶網(wǎng)站)等服務,從網(wǎng)站深度策劃、搜索引擎友好度優(yōu)化到用戶體驗的提升,我們力求做到極致!
siblings() 獲得匹配集合中每個元素的同胞,通過選擇器進行篩選是可選的。
jQuery 的遍歷方法siblings()
$("給定元素").siblings(".selected")
其作用是篩選給定的同胞同類元素(不包括給定元素本身)
例子:網(wǎng)頁選項欄
當點擊任意一個選項卡是,其他2個選項卡就會改變樣式,其內(nèi)容也會隱藏。
下面是html代碼。
<body> <ul id="menu"> <li class="tabFocus">家居</li> <li>電器</li> <li>二手</li> </ul> <ul id="content"> <li class="conFocus">我是家居的內(nèi)容</li> <li>歡迎您來到電器城</li> <li>二手市場,產(chǎn)品豐富多彩</li> </ul> </body>
jQuery代碼
<script type="text/javascript"> $(function() { $("#menu li").each(function(index) { //帶參數(shù)遍歷各個選項卡 $(this).click(function() { //注冊每個選卡的單擊事件 $("#menu li.tabFocus").removeClass("tabFocus"); //移除已選中的樣式 $(this).addClass("tabFocus"); //增加當前選中項的樣式 //顯示選項卡對應的內(nèi)容并隱藏未被選中的內(nèi)容 $("#content li:eq(" + index + ")").show() .siblings().hide();//#menu與#content在html層沒有嵌套關聯(lián),但因為其ul序列相同,用index值可以巧妙的將兩者關聯(lián)。 }); }); }) </script>
其中
當點擊相應的選項卡后,被點擊的選項卡內(nèi)容就會被show()。而其他2個同胞元素<li>選項卡用silibings()篩選出來hide()掉。
這樣就能動態(tài)的顯示點擊區(qū)域的內(nèi)容,而隱藏掉另外2個選項卡了。
而
$("給定元素").siblings(".selected")
中的(".selected")表示篩選給定元素類名為.selected的同胞元素(不包括給定元素自己)
關于“jQuery siblings()怎么使用”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關的知識,可以關注創(chuàng)新互聯(lián)行業(yè)資訊頻道,小編每天都會為大家更新不同的知識點。
分享題目:jQuerysiblings()怎么使用
文章轉載:http://muchs.cn/article42/pihcec.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供全網(wǎng)營銷推廣、網(wǎng)站策劃、自適應網(wǎng)站、App開發(fā)、做網(wǎng)站、企業(yè)網(wǎng)站制作
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉載內(nèi)容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)