jquery的index方法實(shí)現(xiàn)tab效果
更新時(shí)間：2011年02月16日 16:12:16 作者：
jquery的index方法實(shí)現(xiàn)tab效果，需要的朋友可以參考下。
左側(cè)為選項(xiàng)卡，右側(cè)為詳細(xì)內(nèi)容。
原理：
點(diǎn)擊左側(cè)的列表項(xiàng)，根據(jù)所選列表項(xiàng)在列表的[索引n]顯示第n個(gè)內(nèi)容。
（首先需要將列表和內(nèi)容一次性加載到頁(yè)面，內(nèi)容只顯示第一個(gè)，這樣切換起來(lái)更友好。）
如何獲取選擇列表項(xiàng)在列表中的索引：
jquery里有一個(gè)方法是index([subject])
$("#ul li").index($("#selected"));
意思是 首先設(shè)定列表范圍（#ul li列表），然后返回$("#selected")元素在列表中的索引。
獲取到索引之后，在用$("#detail").hide(); $("#detail").eq(n).show(); 來(lái)顯示相同索引的詳情。（選項(xiàng)列表樣式切換同理）
只用了5行。
相關(guān)文章
jQuery插件HighCharts繪制簡(jiǎn)單2D折線圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件HighCharts繪制簡(jiǎn)單2D折線圖效果,結(jié)合完整實(shí)例形式分析了jQuery使用HighCharts插件繪制折線圖的實(shí)現(xiàn)步驟與相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03
這篇文章主要介紹了Jquery實(shí)現(xiàn)獲取子元素的方法,結(jié)合實(shí)例形式分析了jQuery針對(duì)頁(yè)面元素的查找、獲取相關(guān)操作技巧,需要的朋友可以參考下2019-08-08
jQuery對(duì)象和DOM對(duì)象相互轉(zhuǎn)化
jQuery對(duì)象就是通過(guò)jQuery包裝DOM對(duì)象后產(chǎn)生的對(duì)象。jQuery對(duì)象是jQuery獨(dú)有的，其可以使用jQuery里的方法，但是不能使用DOM的方法；例如$("#img").attr("src","test.jpg"); 這里的$("#img")就是jQuery對(duì)象；2009-04-04
這篇文章主要介紹了如何使用jquery序列化表單去除指定元素,需要的朋友可以參考下2014-04-04
這篇文章主要為大家詳細(xì)解析了jQuery中$.ajax()方法參數(shù),具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
這篇文章主要介紹了jQuery層次選擇器用法,結(jié)合實(shí)例形式分析了jQuery針對(duì)頁(yè)面元素層級(jí)操作的層次選擇器使用技巧,需要的朋友可以參考下2016-09-09
在傳統(tǒng)的Javascript里，當(dāng)我們對(duì)某個(gè)頁(yè)面元素進(jìn)行某種操作前，最好先判斷這個(gè)元素是否存在。原因是對(duì)一個(gè)不存在的元素進(jìn)行操作是不允許的。2009-08-08
Easyui使用Dialog行內(nèi)按鈕布局的實(shí)例
下面小編就為大家?guī)?lái)一篇Easyui使用Dialog行內(nèi)按鈕布局的實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
jquery過(guò)濾特殊字符'',防sql注入的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇jquery過(guò)濾特殊字符',防sql注入的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08
jQuery移動(dòng)端跑馬燈抽獎(jiǎng)特效升級(jí)版(抽獎(jiǎng)概率固定)實(shí)現(xiàn)方法
這篇文章主要介紹了jQuery移動(dòng)端跑馬燈抽獎(jiǎng)特效升級(jí)版(抽獎(jiǎng)概率固定)實(shí)現(xiàn)方法,涉及jQuery數(shù)值運(yùn)算及條件判斷等相關(guān)操作技巧,需要的朋友可以參考下2019-01-01