今天自己在做選項卡的時候，想實現tab欄的背景和顏色隨著索引值改變，開始想的思路是想用css實現，當滑鼠hover上去的實現改變背景，自己覺得不太好，又說不出個所以然，想著前兩天在網易雲看的課程，現在有了用處。最後用js實現
下面是**：
>選項卡
title
>
<
link
rel="stylesheet"
href
="css/index.css"
>
head
>
<
body
>
<
div
id="tab"
>
<
div
id="tab_header"
>
<
ul>
<
li class
="selected"
>公告
li>
<
li>規則
li>
<
li>論壇
li>
<
li>安全
li>
<
li>公益
li>
ul>
div>
<
div
id="tab_content"
>
<
div
class
="dom"
style
="display: block;"
>
<
ul>
<
li><
a href
="#"
>少年
a>
li>
<
li><
a href
="#"
>吟哦
a>
li>
<
li><
a href
="#"
>哈哈哈哈
a>
li>
<
li><
a href
="#"
>啊哈哈哈
a>
li>
ul>
div>
<
div
class
="dom"
>
<
ul>
<
li><
a href
="#"
>少dd年
a>
li>
<
li><
a href
="#"
>吟哦
a>
li>
<
li><
a href
="#"
>什麼啊
a>
li>
<
li><
a href
="#"
>啊哈哈哈
a>
li>
ul>
div>
<
div
class
="dom"
>
<
ul>
<
li><
a href
="#"
>禮拜
a>
li>
<
li><
a href
="#"
>吟哦
a>
li>
<
li><
a href
="#"
>哈哈哈哈
a>
li>
<
li><
a href
="#"
>週末
a>
li>
ul>
div>
<
div
class
="dom"
>
<
ul>
<
li><
a href
="#"
>少年
a>
li>
<
li><
a href
="#"
>審核aa
a>
li>
<
li><
a href
="#"
>哈哈哈哈
a>
li>
<
li><
a href
="#"
>啊哈斤
a>
li>
ul>
div>
<
div
class
="dom"
>
<
ul>
<
li><
a href
="#"
>少年
a>
li>
<
li><
a href
="#"
>吟哦
a>
li>
<
li><
a href
="#"
>哈哈哈哈
a>
li>
<
li><
a href
="#"
>啊哈哈哈
a>
li>
ul>
div>
div>
div>
<
script
src="js/index.js"
>
script
>
body
>
html
>
js**如下：
css**如下：注意的是css**中，在點選tab的時候，最左邊和最右邊的邊框1px要去掉*a
#tab
#tab_header
#tab_header ul
#tab_header ul li
#tab_header ul li.selected
#tab_header ul li:nth-child(1)
#tab_header ul li:nth-last-child
#tab_header ul li:hover
/* 內容區域 */
#tab_content
#tab_content .dom
#tab_content .dom ul{}
#tab_content .dom ul li
#tab_content .dom ul li a:hover
效果圖如下
最後今天做的**在這裡了
window.onload = function()
this.classname = "liclass_addbgcolor"
ialllis[this.index].style.backgroundcolor = 'lightblue'
ialllis[this.index].style.backgroundimage = iarr[this.index]
ialldom[this.index].style.display = 'block'}}
}最後效果就是這樣啦
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選項卡的基本實現
不多說，直接上 比較簡單 lang en charset utf 8 titletitle li tab ul tab ul li tabcon 1 tabcon 2 tabcon 3 style function change num script head id tab onclick chan...
jquery實現Tab選項卡選單
預設選中 科技 當滑鼠懸停在 新聞 上時 科技 li li 新聞 li li 體育 li li 財經 li ul div class tab content div class active txt 伴隨著中國移動 微博 成功牽頭5g系統設計，其4g使用者的規模也達到了驚人的數量。在今日舉行的第七屆...