Html 选项卡 li 颜色不同,javascript实现不同颜色Tab标签切换效果

本文实例为大家分享了javascript不同颜色Tab标签切换效果的实现代码，供大家参考，具体内容如下

具体代码：

不同颜色选项卡

* {

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: #000;

}

.card_content div:first-child {

background: #fff;

}

window.onload = function () {

var colorArr = {

0:"#f00",

1:"#0f0",

2:"#00f",

3:"#FC0"

};

var bgColorArr = {

0:"#fff",

1:"#fff",

2:"#fff",

3:"#fff",

}

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

以上就是本文的全部内容，希望对大家的学习有所帮助。