javascript实现不同颜色Tab标签切换效果

2019-11-20 10:11:52

字体：大中小

来源：转载

供稿：网友

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

具体代码：

<html> <head> <title>不同颜色选项卡</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>

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

上一篇：js实现人民币大写金额形式转换

下一篇：JS代码随机生成姓名、手机号、身份证号、银行卡号