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>
希望本文所述對大家學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助，熟練掌握選項(xiàng)卡切換操作。
您可能感興趣的文章:
- 基于JavaScript實(shí)現(xiàn)Tab選項(xiàng)卡切換效果
- 原生js實(shí)現(xiàn)tab選項(xiàng)卡切換
- 很棒的js Tab選項(xiàng)卡切換效果
- 基于javascript實(shí)現(xiàn)tab選項(xiàng)卡切換特效調(diào)試筆記
- 4種JavaScript實(shí)現(xiàn)簡單tab選項(xiàng)卡切換的方法
- JS基于myFocus庫實(shí)現(xiàn)各種功能的tab選項(xiàng)卡切換效果
- 原生javascript實(shí)現(xiàn)Tab選項(xiàng)卡切換功能
- 分步解析JavaScript實(shí)現(xiàn)tab選項(xiàng)卡自動(dòng)切換功能
- js實(shí)現(xiàn)tab選項(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
非常有創(chuàng)意的一個(gè)腳本，直接利用window.prompt彈出修改對話框，不用到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),獲取當(dāng)前頁面棧的實(shí)例,以數(shù)組形式按棧的順序給出,數(shù)組中的元素為頁面實(shí)例,第一個(gè)元素為首頁,最后一個(gè)元素為當(dāng)前頁面,感興趣的朋友參考本文實(shí)例代碼2024-03-03
滑輪滾動(dòng)頁面的事件在網(wǎng)頁特效中進(jìn)場遇到，下面通過示例為大家介紹下原生JS綁定滑輪滾動(dòng)事件并兼容瀏覽器2014-06-06
這篇文章主要介紹了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