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