效果如下：
html部分
<只要分為兩部分div
id="ad"
>
<
ul id
="tab_left"
>
<
li><
a href
="#"
>選項卡1
a>
li>
<
li><
a href
="#"
>選項卡2
a>
li>
<
li><
a href
="#"
>選項卡3
a>
li>
<
li><
a href
="#"
>選項卡4
a>
li>
ul>
<
ul id
="tab_con"
>
<
li><
img
src="2018a.png"
alt=""
>
li>
<
li><
img
src="2018b.png"
alt=""
>
li>
<
li><
img
src="2018c.png"
alt=""
>
li>
<
li><
img
src="2018d.png"
alt=""
>
li>
ul>
div>
一部分在左邊，是放選項卡的
另一部分在右邊，是顯示的
css部分
* #tab_left #tab_left li #tab_left li a #tab_left li a:hover #tab_con #tab_con li #tab_con li img #ad左邊選項卡正當排列
然後通過jq進行顯示或隱藏
js部分
先找到選項卡的列表，並定義tab1；再找到的列表，並定義con1；
然後再對選項卡下的每乙個li設定懸浮事件函式
裡面的函式，先將選項卡的每個li新增編號
然後跟列表進行配對，並顯示相同編號的，隱藏其他的。
知識點：
函式名功能
使用格式
描述index()
返回指定元素相對於其他指定元素的index位置
$(select).index()
相對於選擇器。如上述的第乙個li，則表示:tab1.index(0);
eq()
選擇器選取帶有指定index值的元素
$(select).eq(index)
index值從零開始，所以直接用數字也行，但這樣卻可以通過index的值改變而改變，達成所以li都有被選中的機會。
not()
選擇器選取除了指定元素以外的所有元素。
$(select).not(index)
如果與eq()的值相同，那麼除eq()所選擇的那個li不要，其他的都要了。
hide()
隱藏html元素
$(select).hide(speed,callback)
speed是時間，用於產生過度的，callback是作用函式，用於觸發後的其他執行
show()
顯示html元素
$(select).show(speed,callback)
同上fadein()
用於淡入以隱藏的元素
$(select).fadein(speed,callback)
裡面的引數同上，
jQuery選項卡外掛程式
html結構 ul id tabs class tabs li data tab users users li li data tab groups groups li ul div id tabscontent class tabscontent div data tab users class ...
選項卡套選項卡
實現 項卡套小選項卡 項卡切換同時小選項卡也進行切換，且每次 項卡的切換是在小選項卡切換完後進行 大的外層的選項卡 大的選項卡內部有乙個小的選項卡 功能 自動切換 滑鼠經過切換 方案一 不可行 開兩個定時器，乙個控制外層選卡，乙個控制內層選卡。仔細分析發現，外層選項卡的切換是需要在內層選卡全部切換完...
jQuery滑動tab選項卡
先上最終效果 需求分析 1.選項卡選單數量不固定，選單內容不固定，導致了單個選單和整體的寬度都是未知的，2.第乙個需求導致滑塊寬度也是不固定的 3.為了讓互動效果更好，滑塊需要新增過度動畫 對滑塊的需求導致滑塊和選單的html結構必須分離，並使用了jquery的offset方法獲取並設定位置，所有的...