doctype html
>
<
html
lang
="en"
>
<
head
>
<
meta
charset
="utf-8"
/>
<
title
>document
title
>
<
style
>
.tab ul li
.tab ul li:hover
.tab div
.tab .active
style
>
head
>
<
body
>
<
div
class
="tab"
>
<
ul>
<
li>名字
li>
<
li>年齡
li>
<
li>大小
li>
ul>
<
div
class
="active"
>111
div>
<
div>222
div>
<
div>333
div>
div>
<
script
>
varlists
=document.getelementsbytagname('li
');vari =0
;
vartab
=document.queryselector(
'.tab');
vardivs
=tab.getelementsbytagname(
'div');
// for迴圈開始
for(i =0
;i<
lists.length;i++)
//給當前需要展示的div加上class
divs[
this
.index].classname ='
active'}
lists[i].onmouseout
=function
() }
// for迴圈結束
script
>
body
>
html
>
要點：**函式不允許出現for迴圈的i，因為js只有函式級作用域。
解決方案： 以下**塊內容替代上面js中的for迴圈
儲存變數i，儲存在每個li的屬性中。
for(i = 0;i< lists.length;i++)divs[
this.index].classname = 'active'}
lists[i].onmouseout = function
() }
閉包，儲存住變數i
for(i = 0;i< lists.length;i++)//給當前需要展示的div加上class
divs[i].classname = 'active'}
lists[i].onmouseout = function
() })(i);
}
let 建立塊級作用域 ，
for(let i = 0;i< lists.length;i++)//給當前需要展示的div加上class
divs[i].classname = 'active'}
lists[i].onmouseout = function
()
}
選項卡套選項卡
實現 項卡套小選項卡 項卡切換同時小選項卡也進行切換，且每次 項卡的切換是在小選項卡切換完後進行 大的外層的選項卡 大的選項卡內部有乙個小的選項卡 功能 自動切換 滑鼠經過切換 方案一 不可行 開兩個定時器，乙個控制外層選卡，乙個控制內層選卡。仔細分析發現，外層選項卡的切換是需要在內層選卡全部切換完...
vue 選項卡 typecho tabs選項卡外掛程式
在看技術文件的時候發現使用選項卡來呈現示例 是個很不錯的方式，既可以節約版面空間還清晰明了，比如下面這個簡單的vue宣告式渲染demo 實際執行效果 明顯比順序排下來好多了，剛開始在網上搜尋typecho此類外掛程式一直沒有找到，所以乾脆自己動手擼乙個，最後就在typecho的預設helloworl...
選項卡整理
1.仿 的導航標籤效果！html 無標題文件 2 不同的專案使用不同的顏色來區分 3 這回需要使用到js了，呵呵 4 背景只需要兩個檔案就足夠，減少伺服器負擔 5 這是使用到的兩個 6.不是什麼地方用ajax都合適的！7.該重新整理的地方還是要重新整理！8.重新整理用cookie儲存還是很不方便的！...