Html 选项卡 li 颜色不同,js实现TAB切换对应不同颜色的代码

本文实例讲述了js实现TAB切换对应不同颜色的代码。分享给大家供大家参考。具体如下：

这是一个个性化的TAB菜单，每个TAB卡片的背景颜色都不相同，鼠标点击上部的TAB，在主体内容区可看到颜色的变化。

运行效果截图如下：

在线演示地址如下：

具体代码如下：

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

不同颜色选项卡

* {

margin: 0;

padding: 0;

}

body {

font: 12px/20px 'microsoft yahei', 'arial';

word-break: break-all;

word-wrap: break-word;

}

.clearfix:after {

content: '.';

display: block;

clear: both;

height: 0;

visibility: hidden;

}

.clearfix {

display: inline-block;

}

* html .clearfix {

height: 1%;

}

.clearfix {

display: block;

}

#wrap {

width: 320px;

margin: 2em auto;

}

.card_List {

height: 30px;

border-bottom: 1px solid #f00;

position: relative;

}

.card_List li {

float: left;

width: 68px;

text-align: center;

height: 30px;

line-height: 30px;

margin: 0 5px;

display: inline;

border-top-left-radius: 6px;

border-top-right-radius: 6px;

}

.card_List li.current {

height: 34px;

line-height: 34px;

margin-top: -4px;

border: 1px solid #F00;

background: #FF9494;

border-bottom: none;

color: #fff;

}

#oLi li:nth-child(1){

background: #FF9494;

}

#oLi li:nth-child(2){

background: #8CFE8C;

}

#oLi li:nth-child(3){

background: #6969FB;

}

#oLi li:nth-child(4){

background: #FFE26F;

}

.card_content div {

display: none;

height: 100px;

text-align: center;

color: white;

}

.card_content div:first-child {

background: #FF9494;

}

window.onload = function () {

var colorArr = {

0:"#f00",

1:"#0f0",

2:"#00f",

3:"#FC0"

};

var bgColorArr = {

0:"#FF9494",

1:"#8CFE8C",

2:"#6969FB",

3:"#FFE26F",

}

var oL = document.getElementById("oLi");

var oLi = oL.getElementsByTagName("li");

var oUl = document.getElementById("oUl").getElementsByTagName("div");

for ( var i=0 ; i

oLi[i].index = i;

oLi[i].onclick = function () {

for ( var j = 0 ; j < oLi.length ; j++ ){

oLi[j].className = "";

oLi[j].style.border = "none";

}

this.className = "current";

this.style.border = "1px solid " + colorArr[this.index];

this.style.borderBottom = "none";

oL.style.borderBottom = "1px solid " + colorArr[this.index];

for ( var j=0 ; j < oUl.length ; j++ ){

oUl[j].style.display = "none";

oUl[this.index].style.display = "block";

oUl[j].style.backgroundColor = bgColorArr[this.index];

}

};

}

};

• 1
• 2
• 3
• 4

11111111111111

22222222222

3333333333333

44444444444444444

希望本文所述对大家的javascript程序设计有所帮助。