JavaScript 탭 표시 줄 전환 효과 구현

4504 단어 jstab전환 하 다.
본 논문 의 사례 는 자바 스 크 립 트 가 tab 표시 줄 전환 효 과 를 실현 하 는 구체 적 인 코드 를 공유 하여 여러분 께 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
  <!-- css   -->
 <style>
  * {
   margin: 0;
   padding: 0;
  }
  .box {
   width: 600px;
   margin: 100px 500px;
   border: 1px solid #999;
  }
  li {
   list-style: none;
  }
  .tab_top {
   width: 600px;
   height: 50px;
   background-color: #ccc;
  }
  .tab_top li {
   float: left;
   width: 50px;
   height: 50px;
   line-height: 50px;
   text-align: center;
   padding: 0 20px;
  }
  .current {
   background-color: red;
   color: #fff;
  }
  .tab_con {
   width: 600px;
   height: 300px;
   background-color: #fff;
  }
    css       div    
  .item {
   display: none
  }
 </style>
 <!-- html   -->
 <body>
 <div class="box">
  <div class="tab_top">
   <ul>
    <li class="current">   </li>
    <li>   </li>
    <li>   </li>
    <li>   </li>
    <li>   </li>
   </ul>
  </div>
  <div class="tab_con">
   <div class="item" style="display: block;"> --->         
         <br>
         <br>
         <br>
         <br>
         <br>
   </div>
   <div class="item">
         <br>
         <br>
         <br>
         <br>
         <br>
   </div>
   <div class="item">
         <br>
         <br>
         <br>
         <br>
         <br>
   </div>
   <div class="item">
         <br>
         <br>
         <br>
         <br>
         <br>
   </div>
   <div class="item">
         <br>
         <br>
         <br>
         <br>
         <br>
         <br>
   </div>
  </div>
 </div>
</body>
js:

<script>
 //1                             (    )        
 //    
 //01         
 var tab_top = document.querySelector('.tab_top');
 //02           li       
 var lis = tab_top.querySelectorAll('li');
 //03           div         
 var item = document.querySelectorAll('.item')
 //for      li       
 for (var i = 0; i < lis.length; i++) {
  //     li        index   i 
  lis[i].setAttribute('index', i);
  //       
  lis[i].onclick = function () {
   //       
   for (var j = 0; j < lis.length; j++) {
    //     li       
    lis[j].className = '';
   }
   //         
   this.className = 'current'
   //2             onclick         
   //    top   li   index        0        

   //              
   var index = this.getAttribute('index');
   //     li     div    
   //                        
   for (var k = 0; k < item.length; k++) {
    //    div   
    item[k].style.display = 'none'
   }
   //     li  li index   div   
   item[index].style.display = 'block';

  }

 }

</script>
효과 그림:

만약 에 여러분 이 깊이 공부 하고 싶다 면 두 개의 멋 진 주 제 를 클릭 할 수 있 습 니 다.javascript 옵션 조작 방법 집합jquery 옵션 조작 방법 집합
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

좋은 웹페이지 즐겨찾기