JavaScript實(shí)現(xiàn)簡單的tab選項(xiàng)卡切換

更新時(shí)間：2016年01月05日 16:57:17 作者：Cakty、Riven

這篇文章主要介紹了JavaScript實(shí)現(xiàn)簡單的tab選項(xiàng)卡切換的相關(guān)資料,需要的朋友可以參考下

本文實(shí)例講解了JavaScript實(shí)現(xiàn)簡單的tab選項(xiàng)卡切換的示例代碼，分享給大家供大家參考，具體內(nèi)容如下

效果圖：

具體代碼：

<!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">
   //獲取節(jié)點(diǎn)
   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>

希望本文所述對(duì)大家學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助，熟練掌握選項(xiàng)卡切換操作。

您可能感興趣的文章:

相關(guān)文章

get(0).tagName獲得作用標(biāo)簽示例代碼
get(0).tagName可獲得作用標(biāo)簽，下面是它的一個(gè)小應(yīng)用，在學(xué)習(xí)js的朋友可以參考下
2014-10-10
微信小程序?qū)崿F(xiàn)自定義加載圖標(biāo)功能
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)自定義加載圖標(biāo)功能，非常不錯(cuò)具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
2018-07-07
js直接編輯當(dāng)前cookie的腳本
非常有創(chuàng)意的一個(gè)腳本，直接利用window.prompt彈出修改對(duì)話框，不用到cookies目錄去找cookies文件
2008-09-09
Javascript運(yùn)行機(jī)制之Event Loop
這篇文章主要介紹了Javascript運(yùn)行機(jī)制之Event Loop，在學(xué)習(xí)Event Loop前，首先需要了解的幾個(gè)概念Javascript是單線程、任務(wù)隊(duì)列、同步任務(wù)、異步任務(wù)、Javascript執(zhí)行棧，下面來看看文章的詳細(xì)介紹吧
2021-12-12
javascript驗(yàn)證香港身份證的格式或真實(shí)性
本文分享了利用javascript驗(yàn)證香港身份證的格式或真實(shí)性的代碼，具有很好的參考價(jià)值，下面跟著小編一起來看下吧
2017-02-02
uniapp 獲取頁面來源及注意事項(xiàng)
這篇文章主要介紹了uniapp 獲取頁面來源及注意事項(xiàng),獲取當(dāng)前頁面棧的實(shí)例,以數(shù)組形式按棧的順序給出,數(shù)組中的元素為頁面實(shí)例,第一個(gè)元素為首頁,最后一個(gè)元素為當(dāng)前頁面,感興趣的朋友參考本文實(shí)例代碼
2024-03-03
原生JS綁定滑輪滾動(dòng)事件兼容常見瀏覽器
滑輪滾動(dòng)頁面的事件在網(wǎng)頁特效中進(jìn)場遇到，下面通過示例為大家介紹下原生JS綁定滑輪滾動(dòng)事件并兼容瀏覽器
2014-06-06
BootStrap入門教程(三)之響應(yīng)式原理
這篇文章主要介紹了BootStrap入門教程(三)之響應(yīng)式原理的相關(guān)資料，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起看看吧
2016-09-09
js 動(dòng)態(tài)為textbox添加下拉框數(shù)據(jù)源的方法
這篇文章主要介紹了js 動(dòng)態(tài)為textbox添加下拉框數(shù)據(jù)源的方法,需要的朋友可以參考下
2014-04-04
js 獲取坐標(biāo) 通過JS得到當(dāng)前焦點(diǎn)(鼠標(biāo))的坐標(biāo)屬性
通過JS得到當(dāng)前焦點(diǎn)的坐標(biāo),如何實(shí)現(xiàn)，接下來詳細(xì)介紹實(shí)現(xiàn)步驟，有需要的朋友可以參考下
2013-01-01