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