javascript實(shí)現(xiàn)不同顏色Tab標(biāo)簽切換效果
更新時(shí)間：2016年04月27日 16:10:43 作者：木風(fēng)622
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)不同顏色Tab標(biāo)簽切換效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了javascript不同顏色Tab標(biāo)簽切換效果的實(shí)現(xiàn)代碼，供大家參考，具體內(nèi)容如下
具體代碼：
<html>
<head>
<title>不同顏色選項(xiàng)卡</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<style type="text/css">
* {
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;
}
</style>
<script type="text/javascript">
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.length ; 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];
}
};
}
};
</script>
</head>
<body>
<div id="wrap">
<ul id="oLi" class="card_List clearfix">
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<div id="oUl" class="card_content">
<div style="display:block;">
11111111111111
</div>
<div>
22222222222
</div>
<div>
3333333333333
</div>
<div>
44444444444444444
</div>
</div>
</div>
</body>
</html>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。
您可能感興趣的文章:
- JS實(shí)現(xiàn)標(biāo)簽頁(yè)切換效果
- 最簡(jiǎn)單純JavaScript實(shí)現(xiàn)Tab標(biāo)簽頁(yè)切換的方式(推薦)
- Bootstrap 最常用的JS插件系列總結(jié)（圖片輪播、標(biāo)簽切換等）
- javascript實(shí)現(xiàn)標(biāo)簽切換代碼示例
- JS+DIV+CSS實(shí)現(xiàn)的經(jīng)典標(biāo)簽切換效果代碼
- js實(shí)現(xiàn)的tab標(biāo)簽切換效果代碼分享
- 簡(jiǎn)單純js實(shí)現(xiàn)點(diǎn)擊切換TAB標(biāo)簽實(shí)例
- js實(shí)現(xiàn)點(diǎn)擊切換TAB標(biāo)簽實(shí)例
- js(JavaScript)實(shí)現(xiàn)TAB標(biāo)簽切換效果的簡(jiǎn)單實(shí)例
- JS實(shí)現(xiàn)切換標(biāo)簽頁(yè)效果實(shí)例代碼
- JS實(shí)現(xiàn)的簡(jiǎn)單標(biāo)簽點(diǎn)擊切換功能示例
相關(guān)文章
可以設(shè)置超鏈接的Disabled屬性的true 和 false來(lái)確定超鏈接是不是能點(diǎn)擊，下面有個(gè)示例，大家不妨參考下2014-07-07
javascript中關(guān)于執(zhí)行環(huán)境的雜談
如你所知,javascript里執(zhí)行環(huán)境是作為一個(gè)最核心的概念存在的。相信廣大FE筒子們對(duì)于這個(gè)概念不會(huì)陌生，它定義了變量或函數(shù)有權(quán)訪問(wèn)其他數(shù)據(jù)范圍以及其行為。2011-08-08
picChange圖片切換特效的封裝函數(shù)，能夠根據(jù)圖片html代碼自動(dòng)生成右下角的數(shù)字導(dǎo)航按鈕。2010-05-05
Avalonjs雙向數(shù)據(jù)綁定與監(jiān)聽(tīng)的實(shí)例代碼
本文通過(guò)實(shí)例代碼給大家介紹了Avalonjs雙向數(shù)據(jù)綁定與監(jiān)聽(tīng)的實(shí)現(xiàn)代碼，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下吧2017-06-06
這篇文章主要給大家介紹了關(guān)于ES6中Set與WeakSet集合的相關(guān)資料,Set是ES6給開(kāi)發(fā)者帶來(lái)的一種新的數(shù)據(jù)結(jié)構(gòu),你可以理解為值的集合,WeakSet結(jié)構(gòu)同樣不會(huì)存儲(chǔ)重復(fù)的值,但它的成員必須是對(duì)象類型的值,需要的朋友可以參考下2021-07-07
FullCalendar日歷插件應(yīng)用之?dāng)?shù)據(jù)展現(xiàn)(一)
fullcalendar作為一個(gè)功能完善的日歷插件使用非常廣泛，在web開(kāi)發(fā)開(kāi)發(fā)過(guò)程 中非常流行。它與ext js 中的calendar非常類似，但考慮到extjs 比較“復(fù)雜龐大”，所以我在開(kāi)發(fā)開(kāi)發(fā)過(guò)程中都會(huì)優(yōu)先考慮fullcalendar2015-12-12
這篇文章介紹了Javascript alert消息換行的方法，有需要的朋友可以參考一下2013-08-08
深入淺析JavaScript面向?qū)ο蠛驮秃瘮?shù)
這篇文章主要介紹了深入淺析JavaScript面向?qū)ο蠛驮秃瘮?shù)的相關(guān)資料,需要的朋友可以參考下2016-02-02
在IE下,CSS里可以寫入JavaScript腳本,不過(guò),要用expression套住. 雖然可以這樣,但是由于是在CSS里,這個(gè)特殊地方,所以,不能寫成如下這樣: width:expression(if(...){}else{...})2008-04-04
JavaScript中數(shù)組對(duì)象的那些自帶方法介紹
數(shù)組對(duì)象自帶方法想必大家都有所耳聞,今天主要為大家介紹下JavaScript中數(shù)組對(duì)象的那些自帶方法，感興趣的你可以參考下哈，希望可以幫助你學(xué)習(xí)javascript2013-03-03