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 Dialog的內(nèi)存泄露問(wèn)題解決方法
如何避免JQuery Dialog的內(nèi)存泄露，需要的朋友可以參考下。2010-06-06
三分鐘帶你玩轉(zhuǎn)jQuery.noConflict()
這篇文章主要介紹了三分鐘帶你玩轉(zhuǎn)jQuery.noConflict() 的相關(guān)資料,需要的朋友可以參考下2016-02-02
jquery輸入數(shù)字隨機(jī)抽獎(jiǎng)特效的簡(jiǎn)單實(shí)現(xiàn)代碼
下面小編就為大家?guī)?lái)一篇jquery輸入數(shù)字隨機(jī)抽獎(jiǎng)特效的簡(jiǎn)單實(shí)現(xiàn)代碼。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
jquery判斷小數(shù)點(diǎn)兩位和自動(dòng)刪除小數(shù)兩位后的數(shù)字
這篇文章主要介紹了jquery判斷小數(shù)點(diǎn)兩位和自動(dòng)刪除小數(shù)兩位后的數(shù)字,需要的朋友可以參考下2014-03-03
jQuery實(shí)現(xiàn)漂亮實(shí)用的商品圖片tips提示框效果(無(wú)圖片箭頭+陰影)
這篇文章主要介紹了jQuery實(shí)現(xiàn)漂亮實(shí)用的商品圖片tips提示框效果,具有鼠標(biāo)滑過(guò)顯示動(dòng)態(tài)提示框的效果,涉及針對(duì)鼠標(biāo)事件的響應(yīng)及頁(yè)面元素動(dòng)態(tài)操作技巧,需要的朋友可以參考下2016-04-04
用JQuery 實(shí)現(xiàn)AJAX加載XML并解析的腳本
用JQuery 實(shí)現(xiàn)AJAX加載XML并解析的腳本2009-07-07
11個(gè)用于提高排版水平的基于jquery的文字效果插件
我們都知道，在傳統(tǒng)的排版當(dāng)中使用DIV+CSS來(lái)實(shí)現(xiàn)的話是很困難的，今天使用jquery插件，你可以實(shí)現(xiàn)卓越的排版效果，專門(mén)用于為您提高您的排版水平2012-09-09
按Enter鍵觸發(fā)事件的jquery方法實(shí)現(xiàn)代碼
這篇文章主要介紹了按Enter鍵觸發(fā)事件的jquery方法,需要的朋友可以參考下2014-02-02
這篇文章主要介紹了jQuery帶進(jìn)度條全屏圖片輪播特效，圖片輪播效果特別適合做產(chǎn)品展示，還帶有進(jìn)度條轉(zhuǎn)接全屏圖片展示，感興趣的小伙伴可以參考下2015-09-09
當(dāng)DOM載入就緒可以查詢及操縱時(shí)綁定一個(gè)要執(zhí)行的函數(shù)，下面有個(gè)示例，不懂的朋友可以學(xué)習(xí)下2013-08-08