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>
希望本文所述對大家學(xué)習(xí)javascript程序設(shè)計有所幫助，熟練掌握選項卡切換操作。
相關(guān)文章
在javascript前端開發(fā)中js函數(shù)問題經(jīng)常會被討論，這個問題仁者見仁智者見智，下面通過示例代碼給大家介紹js五大常見函數(shù)，感興趣的朋友一起看看吧2018-03-03
下面小編就為大家分享一篇php 解壓zip壓縮包內(nèi)容到指定目錄的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
這篇文章主要介紹了Blazor實現(xiàn)微信的Tab切換功能,本文中的UI組件使用的是MASA?Blazor,您也可以是其他的UI框架，這個并不影響實際的運行效果，本文案例是兼容PC和Android的，演示效果是android中執(zhí)行的，在PC中執(zhí)行效果依然有效，需要的朋友可以參考下2023-01-01
JavaScript常用函數(shù)工具集：lao-utils
現(xiàn)在Javascript庫海量，流行的也多，比如jQuery，YUI等，雖然功能強大，但也是不萬能的，功能不可能涉及方方面面，這里給大家分享一個的JS庫是對這些的補充，很多也比較實用，把應(yīng)用到項目中中去也比較方面，這也是對工作的一些積累，也加深對知識的理解。2016-03-03
需求是一個字符串，想刪除這個字符串最后一個字符，比如“1,2,3,4,5,”，刪除最后一個“,”用javascript怎么實現(xiàn)？下面給出三種方法2014-01-01
SeaJS是一個遵循CommonJS規(guī)范的JavaScript模塊加載框架，可以實現(xiàn)JavaScript的模塊化開發(fā)及加載機制,本文給大家介紹JavaScript模塊化開發(fā)之SeaJS，需要的朋友參考下2015-12-12
javascript中動態(tài)加載js文件多種解決辦法總結(jié)
這篇文章主要介紹了javascript中動態(tài)加載js文件多種解決辦法，有需要的朋友可以參考一下2013-11-11
ES6允許按照一定模式從數(shù)組或?qū)ο笾刑崛≈?，然后對變量進行賦值，稱為解構(gòu)。只要等號兩邊的模式相同，左邊的變量就會被賦予對應(yīng)的值，這種寫法屬于“模式匹配”。統(tǒng)稱起來就叫做“解構(gòu)賦值”。2021-05-05
這篇文章主要介紹了JavaScript中的數(shù)組特性介紹,本文總結(jié)了數(shù)組的3種特性和4種創(chuàng)建數(shù)組的方法,需要的朋友可以參考下2014-12-12
JAVASCRIPT style 中visibility和display之間的區(qū)別
visibility屬性用來確定元素是顯示還是隱藏的，這用visibility="visible|hidden"來表示（visible表示顯示，hidden表示隱藏）。2010-01-01