JS實(shí)現(xiàn)選項(xiàng)卡實(shí)例詳解
本文實(shí)例講述了JS實(shí)現(xiàn)選項(xiàng)卡的方法。分享給大家供大家參考，具體如下：
思路：選項(xiàng)卡就是點(diǎn)擊按鈕切換到相應(yīng)內(nèi)容，其實(shí)就是點(diǎn)擊按鈕把內(nèi)容通過(guò)display(block none)來(lái)實(shí)現(xiàn)切換的。
1、首先獲取元素。
2、for循環(huán)歷遍按鈕元素添加onclick 或者 onmousemove事件。
3、因?yàn)辄c(diǎn)擊當(dāng)前按鈕時(shí)會(huì)以高亮狀態(tài)顯示，所以要再通過(guò)for循環(huán)歷遍把所有的按鈕樣式設(shè)置為空和把所有DIV的display設(shè)置為none。
4、把當(dāng)前按鈕添加樣式，把當(dāng)前DIV顯示出來(lái)，display設(shè)置為block。
注：給多個(gè)元素添加多個(gè)事件要用for循環(huán)歷遍。如選項(xiàng)卡是點(diǎn)擊切換，當(dāng)前按鈕高度，點(diǎn)擊和按鈕高亮就是2個(gè)事件，所以要用2個(gè)for循環(huán)歷遍。
HTML代碼：
<div id="box"> <input type="button" value="1" /> <input type="button" value="2" /> <input type="button" value="3" /> <input type="button" value="4" /> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div>
JS代碼：
<script>
window.onload=function(){
var box=document.getElementById('box');
var input=box.getElementsByTagName('input');
var div=box..getElementsByTagName('div');
for(var i=0;i<input.length;i++){ //循環(huán)歷遍onclick事件
input[i].index=i; //input[0].index=0 index是自定義屬性
input[i].onclick=function(){
for(var i=0;i<input.length;i++){ //循環(huán)歷遍去掉button樣式和把div隱藏
input[i].className='';
div[i].style.display='none';
};
this.className='active'; //當(dāng)前按鈕添加樣式
div[this.index].style.display='block'; //div顯示 this.index是當(dāng)前div 即div[0]之類的
};
};
};
</script>
補(bǔ)充：用js寫簡(jiǎn)單選項(xiàng)卡完整步驟
如圖，最簡(jiǎn)單的純粹的選項(xiàng)卡
第一步，當(dāng)然是先寫html代碼和css樣式
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>無(wú)標(biāo)題文檔</title>
<style>
body,ul,li{margin:0; padding:0; font:12px/1.5 arial;}
ul,li{list-style:none;}
.wrap{width:500px; margin:20px auto;}
.hide{display:none;}
#tab_t{height:25px;border-bottom:1px solid #ccc;}
#tab_t li{float:left; width:80px; height:24px; line-height:24px; margin:0 4px; text-align:center; border:1px solid #ccc; border-bottom:none; background:#f5f5f5; cursor:pointer}
#tab_t .act{ position:relative; height:25px; margin-bottom:-1px; background:#fff;}
#tab_c{border:1px solid #ccc; border-top:none; padding:20px;}
</style>
</head>
<body>
<div class="wrap">
<ul id="tab_t">
<li class="act">選擇1</li>
<li>選擇2</li>
<li>選擇3</li>
<li>選擇4</li>
</ul>
<div id="tab_c">
<div>內(nèi)容1</div>
<div class="hide">內(nèi)容2</div>
<div class="hide">內(nèi)容3</div>
<div class="hide">內(nèi)容4</div>
</div>
</div>
</body>
</html>
第二步，實(shí)現(xiàn)簡(jiǎn)單的切換效果
要點(diǎn)1：abc.document.getElementsByTagName("li")：取得abc下面的所有標(biāo)簽為li的元素，返回的是一個(gè)元素集合，有數(shù)組的一些屬性。
要點(diǎn)2：循環(huán)，先循環(huán)給li加上onclick事件，再onlink事件點(diǎn)擊的時(shí)候，再循環(huán)讓所有選項(xiàng)卡的act樣式去掉，所有的內(nèi)容隱藏。然后讓所點(diǎn)擊的選項(xiàng)及對(duì)應(yīng)內(nèi)容顯示。
要點(diǎn)3：tab_t_li[i].index = i; 在循環(huán)時(shí)，給選項(xiàng)卡加一個(gè)額外的屬性并賦值，以做選項(xiàng)卡和內(nèi)容的對(duì)應(yīng)。
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>無(wú)標(biāo)題文檔</title>
<style>
body,ul,li{margin:0; padding:0; font:12px/1.5 arial;}
ul,li{list-style:none;}
.wrap{width:500px; margin:20px auto;}
.hide{display:none;}
#tab_t{height:25px;border-bottom:1px solid #ccc;}
#tab_t li{float:left; width:80px; height:24px; line-height:24px; margin:0 4px; text-align:center; border:1px solid #ccc; border-bottom:none; background:#f5f5f5; cursor:pointer}
#tab_t .act{ position:relative; height:25px; margin-bottom:-1px; background:#fff;}
#tab_c{border:1px solid #ccc; border-top:none; padding:20px;}
</style>
<script>
window.onload = function(){
var tab_t = document.getElementById("tab_t");
var tab_t_li = tab_t.getElementsByTagName("li");
var tab_c = document.getElementById("tab_c");
var tab_c_li = tab_c.getElementsByTagName("div");
var len = tab_t_li.length;
var i=0;
for(i=0; i<len; i++){
tab_t_li[i].index = i;
tab_t_li[i].onclick = function(){
for(i=0; i<len; i++){
tab_t_li[i].className = '';
tab_c_li[i].className = 'hide';
}
tab_t_li[this.index].className = 'act';
tab_c_li[this.index].className = '';
}
}
}
</script>
</head>
<body>
<div class="wrap">
<ul id="tab_t">
<li class="act">選擇1</li>
<li>選擇2</li>
<li>選擇3</li>
<li>選擇4</li>
</ul>
<div id="tab_c">
<div>內(nèi)容1</div>
<div class="hide">內(nèi)容2</div>
<div class="hide">內(nèi)容3</div>
<div class="hide">內(nèi)容4</div>
</div>
</div>
</body>
</html>
第三步，寫成函數(shù)。上面的寫法只能一個(gè)頁(yè)面用一個(gè)選項(xiàng)卡，如果再加一個(gè)的話，就需要復(fù)制一份，再改很多變量名。
要點(diǎn)：tab_t_li[i][evt] 因?yàn)閭髦档臅r(shí)候是字符串，如果直接寫的話就是tab_t_li[i]."onclick"這樣話是執(zhí)行不了的，tab_t_li["onclick"]這樣執(zhí)行沒(méi)問(wèn)題。
好了，現(xiàn)在一個(gè)頁(yè)面上就可以有多個(gè)切換了，只需要調(diào)用函數(shù)的時(shí)候，寫上相應(yīng)的id名和標(biāo)簽名，事件名稱就可以了
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>無(wú)標(biāo)題文檔</title>
<style>
body,ul,li{margin:0; padding:0; font:12px/1.5 arial;}
ul,li{list-style:none;}
.wrap{width:500px; margin:20px auto;}
.hide{display:none;}
#tab_t{height:25px;border-bottom:1px solid #ccc;}
#tab_t li{float:left; width:80px; height:24px; line-height:24px; margin:0 4px; text-align:center; border:1px solid #ccc; border-bottom:none; background:#f5f5f5; cursor:pointer}
#tab_t .act{ position:relative; height:25px; margin-bottom:-1px; background:#fff;}
#tab_c{border:1px solid #ccc; border-top:none; padding:20px;}
</style>
<script>
window.onload = function(){
tab("tab_t","li","tab_c","div","onmouseover")
function tab(tab_t,tab_t_tag,tab_c,tag_c_tag,evt){
var tab_t = document.getElementById(tab_t);
var tab_t_li = tab_t.getElementsByTagName(tab_t_tag);
var tab_c = document.getElementById(tab_c);
var tab_c_li = tab_c.getElementsByTagName(tag_c_tag);
var len = tab_t_li.length;
var i=0;
for(i=0; i<len; i++){
tab_t_li[i].index = i;
tab_t_li[i][evt] = function(){
for(i=0; i<len; i++){
tab_t_li[i].className = '';
tab_c_li[i].className = 'hide';
}
tab_t_li[this.index].className = 'act';
tab_c_li[this.index].className = '';
}
}
}
}
</script>
</head>
<body>
<div class="wrap">
<ul id="tab_t">
<li class="act">選擇1</li>
<li>選擇2</li>
<li>選擇3</li>
<li>選擇4</li>
</ul>
<div id="tab_c">
<div>內(nèi)容1</div>
<div class="hide">內(nèi)容2</div>
<div class="hide">內(nèi)容3</div>
<div class="hide">內(nèi)容4</div>
</div>
</div>
</body>
</html>
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
- js實(shí)現(xiàn)簡(jiǎn)單選項(xiàng)卡功能
- js實(shí)現(xiàn)簡(jiǎn)單的可切換選項(xiàng)卡效果
- js選項(xiàng)卡的實(shí)現(xiàn)方法
- javascript實(shí)現(xiàn)tabs選項(xiàng)卡切換效果(自寫原生js)
- js實(shí)現(xiàn)Tab選項(xiàng)卡切換效果
- 用js實(shí)現(xiàn)簡(jiǎn)單的tab選項(xiàng)卡
- JS實(shí)現(xiàn)選項(xiàng)卡插件的兩種寫法（jQuery和class）
- js利用iframe實(shí)現(xiàn)選項(xiàng)卡效果
- js實(shí)現(xiàn)簡(jiǎn)單選項(xiàng)卡制作
- 用JS編寫選項(xiàng)卡效果
相關(guān)文章
js eval木馬代碼,以后再分析吧...2007-03-03
javascript中獲取元素標(biāo)簽中間的內(nèi)容的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇javascript中獲取元素標(biāo)簽中間的內(nèi)容的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10
JS解決移動(dòng)web開發(fā)手機(jī)輸入框彈出的問(wèn)題
在移動(dòng)web開發(fā)中和pc端不同的是，手機(jī)的輸入是軟鍵盤，這樣就會(huì)有個(gè)問(wèn)題，那就是當(dāng)有輸入的時(shí)候，鍵盤彈起來(lái)，整個(gè)頁(yè)面難免會(huì)發(fā)生變化。怎么解決這個(gè)問(wèn)題呢？下面腳本之家小編給大家分享JS解決移動(dòng)web開發(fā)手機(jī)輸入框彈出的問(wèn)題2017-03-03
JS實(shí)現(xiàn)數(shù)組內(nèi)值累加常見的3個(gè)方法
這篇文章主要給大家介紹了關(guān)于JS實(shí)現(xiàn)數(shù)組內(nèi)值累加常見的3個(gè)方法,文中通過(guò)實(shí)例代碼將3個(gè)方法介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用js具有一定參考借鑒價(jià)值,需要的朋友可以參考下2023-07-07
這篇文章主要為大家詳細(xì)介紹了如何通過(guò)JavaScript+canvas實(shí)現(xiàn)繪制流星雨效果，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2022-10-10
JS實(shí)現(xiàn)簡(jiǎn)易換圖時(shí)鐘功能分析
這篇文章主要介紹了JS實(shí)現(xiàn)簡(jiǎn)易換圖時(shí)鐘功能,結(jié)合實(shí)例形式分析了javascript結(jié)合時(shí)間函數(shù)定時(shí)變換顯示圖片實(shí)現(xiàn)時(shí)鐘功能的相關(guān)操作技巧,代碼中備有較為詳盡的注釋便于理解,需要的朋友可以參考下2018-01-01
本篇文章主要給大家講解了ES6/JavaScript使用技巧，需要的朋友參考一下吧。2017-12-12
javascript獲取當(dāng)前的時(shí)間戳的方法匯總
這篇文章主要介紹了javascript獲取當(dāng)前的時(shí)間戳的方法匯總的相關(guān)資料,需要的朋友可以參考下2015-07-07
javascript 保存文件到本地實(shí)現(xiàn)方法
本文將提供兩種方式保存圖片，大家可以根據(jù)喜歡自由選擇2012-11-11
這篇文章主要介紹了詳解webpack 如何集成第三方j(luò)s庫(kù)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06