首先我們來看下html
tab1內容
tab2內容
tab3內容
tab4內容
這個結構不用解釋把？算了還是解釋下把。
首先乙個總容器這個容器有個本身的class和表示下面顯示哪項顯示的class
然後是2個div表示tab和內容
好了我們看下css，具體選項卡長什麼樣子需要自己玩的呀 我下面那個比較醜......
/*reset*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td
/*global*/
body
/* --布局開始-- */
#page
#page .contentkey
#page .contentkey .tab
#page .contentkey .tab ul
#page .contentkey .tab ul li
#page .contentkey .tab ul li.tab-end
#page .contentkey .tab ul li.key a
#page .contentkey .itemlist
#page .contentkey .itemlist .item
#page .contentkey.tab1 .itemlist .item.tab1,
#page .contentkey.tab2 .itemlist .item.tab2,
#page .contentkey.tab3 .itemlist .item.tab3,
#page .contentkey.tab4 .itemlist .item.tab4
這個css需要解釋下，應為媳婦就是這看不懂......
首先是
#page .contentkey .itemlist .item這行表示所有的展示項預設都是隱藏的
然後是下面4行表示總容器下的某個是顯示的這個需要js來控制總容器
#page .contentkey.tab1 .itemlist .item.tab1,
#page .contentkey.tab2 .itemlist .item.tab2,
#page .contentkey.tab3 .itemlist .item.tab3,
#page .contentkey.tab4 .itemlist .item.tab4
最後我們來看下
js，我用的是jquery
$(".a-tab").click(function () )講下指令碼思路，這個指令碼寫的比較戳，其實理解思路就可以了
主要就是移除頂級容器表示展示哪項的class移除，加上現在需要顯示那項的class對應css就可以了
這樣玩就是多個選項卡 乙個指令碼就可以了 當然這是在不涉及業務邏輯的情況下，看看下面有3個選項卡在頁面上乙個指令碼也不會有什麼衝突
tab1內容
tab2內容
tab3內容
tab4內容
tab1內容
tab2內容
tab3內容
tab4內容
tab1內容
tab2內容
tab3內容
tab4內容
選項卡tab滑動效果 slide切換選項卡
p 各種下拉列表,導航,多級選單,右側展開,左側展開 p div div h2class title slide 3 h2 p tab標籤,選項卡,選卡,jquery選項卡,標籤頁,動態載入tab p div div h2class title slide 4 h2 p 翻頁,分頁，無重新整理翻頁,...
tab 標籤選項卡
1.css body,div,ul,li body a link a visited a hover ul tab2 menubox menubox ul menubox li menubox li.hover contentbox 2.頁面 div 新聞列表1 wang wangding wang...
實現Tab選項卡
今天自己在做選項卡的時候，想實現tab欄的背景和顏色隨著索引值改變，開始想的思路是想用css實現，當滑鼠hover上去的實現改變背景，自己覺得不太好，又說不出個所以然，想著前兩天在網易雲看的課程，現在有了用處。最後用js實現 下面是 選項卡 title link rel stylesheet hre...