Javascript réalise l'effet de commutation de différentes couleurs Tab labels

Javascript réalise l'effet de commutation de différentes couleurs Tab labels_javascript skills

WBOY

Libérer： 2016-05-16 15:03:35

original

1239 Les gens l'ont consulté

L'exemple de cet article partage avec vous le code d'implémentation de l'effet de changement d'onglet JavaScript de différentes couleurs pour votre référence. Le contenu spécifique est le suivant

Code spécifique :

<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>

Copier après la connexion

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.