집 >웹 프론트엔드 >JS 튜토리얼 >JavaScript는 간단한 탭 전환_javascript 기술을 구현합니다.

JavaScript는 간단한 탭 전환_javascript 기술을 구현합니다.

WBOY원래의: 2016-05-16 15:21:391076검색

본 글에서는 자바스크립트를 이용한 간단한 탭 전환을 위한 샘플 코드를 설명하고 참고용으로 공유합니다

렌더링:

구체 코드:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>table切换</title>
  <style type="text/css">
    *{
      padding: 
    }
    button{
      width: 95px;
    }
    .active {
      background-color: yellow;
    }
    #wrap{
      width:510px;
      overflow: hidden;
      margin:0 auto;
    }
    #inner{
      width:9999px;
      overflow: hidden;
      position: relative;
      left:0;
      transition: left 0.6s;
    }
    #inner a {
      float: left;
    }
    #inner img {
      display: block;
      width:510px;
    }
    #main{
      text-align: center;
    }

  </style>
</head>
<body>
 <div id="wrap">
  <div id="inner">
    <a href="###"><img src="img/1.jpg"></a>
    <a href="###"><img src="img/2.jpg"></a>
    <a href="###"><img src="img/3.jpg"></a>
    <a href="###"><img src="img/4.jpg"></a>
    <a href="###"><img src="img/5.jpg"></a>
  </div>
 </div>
 <div id="main">
  <button>1</button>
  <button>2</button>
  <button>3</button>
  <button>4</button>
  <button>5</button>
 </div>

 <script type="text/javascript">
   //获取节点
   var btnList = document.getElementsByTagName("button");
   var inner = document.getElementById("inner");
   //可见宽度
   var perWidth = inner.children[0].offsetWidth;

   //添加事件
     for(var i = 0; i < btnList.length; i++) {
    btnList[i].index = i;
    btnList[i].onclick = function() {
      inner.style.left = -perWidth * this.index + "px";
      for(var j = 0; j < btnList.length; j++) {
        btnList[j].className = "";
      }
      this.className = "active";
    }
  }
 </script>
</body>
</html>

이 기사가 JavaScript 프로그래밍을 배우고 탭 전환 작업에 능숙해지는 데 도움이 되기를 바랍니다.

성명：

이전 기사：jQuery Mobile 사용자 정의 tag_jquery에 대한 자세한 설명다음 기사：jQuery Mobile 사용자 정의 tag_jquery에 대한 자세한 설명

JavaScript는 간단한 탭 전환_javascript 기술을 구현합니다.

관련 기사