js melaksanakan penukaran TAB sepadan dengan warna kemahiran code_javascript yang berbeza-tutorial js-php.cn

js melaksanakan penukaran TAB sepadan dengan warna kemahiran code_javascript yang berbeza

WBOY

Lepaskan： 2016-05-16 15:41:22

asal

1094 orang telah melayarinya

Contoh dalam artikel ini menerangkan pelaksanaan js penukaran TAB yang sepadan dengan warna yang berbeza. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Ini ialah menu TAB yang diperibadikan Warna latar belakang setiap kad TAB adalah berbeza. Klik TAB atas dengan tetikus dan anda boleh melihat perubahan warna dalam kawasan kandungan utama.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Alamat demo dalam talian adalah seperti berikut:

http://demo.jb51.net/js/2015/js-cha-tab-color-nav-codes/

Kod khusus adalah seperti berikut:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>不同颜色选项卡</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<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: white;
 }
 .card_content div:first-child {
  background: #FF9494;
 }
</style>
<script type="text/javascript">
 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.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>

Salin selepas log masuk

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.