Rumah > hujung hadapan web > tutorial js > js melaksanakan penukaran TAB sepadan dengan warna kemahiran code_javascript yang berbeza

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.

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan