doctype html
>
<
html
lang
="en"
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>選項卡套選項卡
title
>
<
style
type
="text/css"
>
body,ul
.clearfix
.clearfix:afterlia
img#wrap
.left
.left li
.left img
.left span
.left li.active
.right
.right img
.right .tab
.tab li
.tab li a
.tabs1 a
.tabs2 a
.tabs3 a
.tab .active
.tab li a
style
>
<
script
>
window.onload
=function
()
this
.classname ='
active';
aultab[
this
.index].style.display ='
block';
num
=this
.index;
oimg.src ='
img/'+
(num+1
) +'-1.png';};}
//右側選項卡切換
function
tabpic(oultab)
this
.classname ='
active';
oimg.src ='
img/'+
(num+1
) +'-
'+(this
.index +1
) +'.png';};}
};//函式呼叫
for(
vari=0
; i<
aultab.length; i++)
};script
>
head
>
<
body
>
<
div
id="wrap"
class
="clearfix"
>
<
ul class
="left"
>
<
li class
="active"
>
<
a href
="#"
>
<
img
src="img/hot.png"
/>
<
span
>最新**
span
>
a>
li>
<
li>
<
a href
="#"
>
<
img
src="img/bag.png"
/>
<
span
>**特惠
span
>
a>
li>
<
li>
<
a href
="#"
>
<
img
src="img/sale.png"
/>
<
span
>名品推薦
span
>
a>
li>
<
li>
<
a href
="#"
>
<
img
src="img/activity.png"
/>
<
span
>繽紛活動
span
>
a>
li>
ul>
<
div
class
="right"
>
<
img
src="img/1-1.png"
/>
<
ul class
="tab tabs1"
style
="display:block;"
>
<
li><
a href
="#"
class
="active"
>雅詩蘭黛完美修護唇膏(藍色花紋管管體)
a>
li>
<
li><
a href
="#"
>雅詩蘭黛花樣唇膏
a>
li>
<
li><
a href
="#"
>倩碧卓越潤膚乳
a>
li>
ul>
<
ul class
="tab tabs2"
>
<
li><
a href
="#"
class
="active"
>肌研滿150減30
a>
li>
<
li><
a href
="#"
>高價效比低單價商品2.8折起
a>
li>
<
li><
a href
="#"
>貝德瑪滿228送128
a>
li>
<
li><
a href
="#"
>吃出健康美態2.8折起
a>
li>
ul>
<
ul class
="tab tabs3"
>
<
li><
a href
="#"
class
="active"
>艾格利克全場1.5折起
a>
li>
<
li><
a href
="#"
>no1dora全場1.4折起
a>
li>
<
li><
a href
="#"
>伊公尺妮全場1折起
a>
li>
<
li><
a href
="#"
>小熊電器全場1折起
a>
li>
<
li><
a href
="#"
>貝緹卡全場1折起
a>
li>
ul>
<
ul class
="tab tabs2"
>
<
li><
a href
="#"
class
="active"
>萬達歌星2小時歡唱券
a>
li>
<
li><
a href
="#"
>free派-高絲娜蔻眼霜
a>
li>
<
li><
a href
="#"
>財付通下單立減 還抽單反
a>
li>
<
li><
a href
="#"
>free派-芙優潤天蠶絲**
a>
li>
ul>
div>
div>
body
>
html
>
特別注意：命名很重要，切換都是根據命名的數字進行的
選項卡套選項卡
實現 項卡套小選項卡 項卡切換同時小選項卡也進行切換，且每次 項卡的切換是在小選項卡切換完後進行 大的外層的選項卡 大的選項卡內部有乙個小的選項卡 功能 自動切換 滑鼠經過切換 方案一 不可行 開兩個定時器，乙個控制外層選卡，乙個控制內層選卡。仔細分析發現，外層選項卡的切換是需要在內層選卡全部切換完...
vue 選項卡 typecho tabs選項卡外掛程式
在看技術文件的時候發現使用選項卡來呈現示例 是個很不錯的方式，既可以節約版面空間還清晰明了，比如下面這個簡單的vue宣告式渲染demo 實際執行效果 明顯比順序排下來好多了，剛開始在網上搜尋typecho此類外掛程式一直沒有找到，所以乾脆自己動手擼乙個，最後就在typecho的預設helloworl...
js，選項卡效果
css樣式 parent parent span wrap span wrap span span wrap span.focus ul wrap ul wrap ul ul wrap ul first child ul wrap ul li ul wrap ul li ajs樣式 function...