很實(shí)用的js選項(xiàng)卡切換效果
更新時(shí)間：2016年08月12日 11:01:32 作者：回憶沒(méi)了焦點(diǎn)
很棒的JavaScript選項(xiàng)卡切換效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js實(shí)現(xiàn)簡(jiǎn)單的選項(xiàng)卡切換效果的具體代碼，供大家參考，具體內(nèi)容如下
js選項(xiàng)卡切換代碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="gb2312">
<title>實(shí)踐題 - 選項(xiàng)卡</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
#tab{
margin:10px;
}
#tab ul{
list-style:none;
height:36px;
border-bottom:2px solid black ;
display:block;
}
#tab ul li{
float:left;
display:inline-block;
padding:0px 15px;
height:34px;
line-height:34px;
margin-right:5px;
border:1px solid #ccc;
border-bottom:none;
cursor:pointer;
}
#tab div{
padding:5px;
border:1px solid #ccc;
border-top:none;
}
#tab ul li.on{
border-top:2px solid black;
border-bottom: 2px solid white;
}
.hide{
display:none;
}
</style>
<script type="text/javascript">
window.onload=function(){
var mytab =document.getElementById("tab");
var myul=mytab.getElementsByTagName("ul")[0];
var myli=myul.getElementsByTagName("li");
var mydiv=mytab.getElementsByTagName("div");
// alert(mydiv.length)
for(i=0,len=myli.length;i<len;i++){
myli[i].index=i;
myli[i].onclick=function(){
for(var n=0;n<len;n++){
myli[n].className="";
mydiv[n].className="hide";
}
this.className="on";
mydiv[this.index].className="";
}
}
}
</script>
</head>
<body>
<!-- HTML頁(yè)面布局 -->
<div id="tab">
<ul>
<li class="on">房產(chǎn)</li>
<li>家居</li>
<li>二手房</li>
</ul>
<div>
275萬(wàn)購(gòu)昌平鄰鐵三居 總價(jià)20萬(wàn)買(mǎi)一居
200萬(wàn)內(nèi)購(gòu)五環(huán)三居 140萬(wàn)安家東三環(huán)
北京首現(xiàn)零首付樓盤(pán) 53萬(wàn)購(gòu)東5環(huán)50平
京樓盤(pán)直降5000 中信府 公園樓王現(xiàn)房
</div>
<div class="hide">
40平出租屋大改造 美少女的混搭小窩
經(jīng)典清新簡(jiǎn)歐愛(ài)家 90平老房煥發(fā)新生
新中式的酷色溫情 66平撞色活潑家居
瓷磚就像選好老婆 衛(wèi)生間煙道的設(shè)計(jì)
</div>
<div class="hide">
通州豪華3居260萬(wàn) 二環(huán)稀缺2居250w甩
西3環(huán)通透2居290萬(wàn) 130萬(wàn)2居限量搶購(gòu)
黃城根小學(xué)學(xué)區(qū)僅260萬(wàn) 121平70萬(wàn)拋!
獨(dú)家別墅280萬(wàn) 蘇州橋2居優(yōu)惠價(jià)248萬(wàn)
</div>
</div>
</body>
</html>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript常用的3種彈出框(提示框?alert/確認(rèn)框?confirm/輸入框?prompt)
三種彈框在系統(tǒng)中都是同步執(zhí)行的，也就是說(shuō)，三種彈框中的任一彈框彈出，代碼都不在執(zhí)行，直到點(diǎn)擊確認(rèn)或取消，關(guān)閉彈窗后，代碼繼續(xù)執(zhí)行，本文通過(guò)實(shí)例代碼給大家分享JS常用的3種彈出框，感興趣的朋友一起看看吧2022-07-07
JS 數(shù)字轉(zhuǎn)換為大寫(xiě)金額的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇JS 數(shù)字轉(zhuǎn)換為大寫(xiě)金額的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08
關(guān)于JavaScript實(shí)現(xiàn)動(dòng)畫(huà)時(shí)動(dòng)畫(huà)抖動(dòng)的原因與解決方法
最近在使用JS動(dòng)畫(huà)做一些練習(xí)的時(shí)候我發(fā)現(xiàn)在動(dòng)畫(huà)執(zhí)行時(shí)間內(nèi)快速移開(kāi)鼠標(biāo)時(shí)會(huì)出現(xiàn)動(dòng)畫(huà)因鼠標(biāo)移動(dòng)過(guò)快從而導(dǎo)致代碼沖突讓畫(huà)面抖動(dòng)的bug,這篇文章主要給大家介紹了關(guān)于JavaScript實(shí)現(xiàn)動(dòng)畫(huà)時(shí)動(dòng)畫(huà)抖動(dòng)的原因與解決方法,需要的朋友可以參考下2022-06-06
JavaScript如何通過(guò)userAgent判斷幾個(gè)常用瀏覽器詳解
userAgent 屬性是一個(gè)只讀的字符串,聲明了瀏覽器用于 HTTP 請(qǐng)求的用戶代理頭的值,這篇文章主要給大家介紹了關(guān)于JavaScript如何通過(guò)userAgent判斷幾個(gè)常用瀏覽器的相關(guān)資料,需要的朋友可以參考下2021-06-06
下面小編就為大家?guī)?lái)一篇淺談JS繼承_寄生式繼承 & 寄生組合式繼承。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08
本文通過(guò)三種解決方案給大家介紹js中取二維數(shù)組中最大值的方法。介紹的非常詳細(xì)，具有參考價(jià)值2016-04-04
Bootstarp在pycharm中的安裝及簡(jiǎn)單的使用方法
這篇文章主要介紹了Bootstarp在pycharm中的安裝及簡(jiǎn)單的使用方法,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-04-04
這篇文章主要介紹了JS合并兩個(gè)數(shù)組的3種方法詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-10-10
微信小程序中我們創(chuàng)建頁(yè)面時(shí)會(huì)自動(dòng)創(chuàng)建四個(gè)文件分別為js文件,wxml文件wxss文件最后還有我們今天的主角配置文件,下面這篇文章主要給大家介紹了關(guān)于微信小程序全局配置以及常用配置項(xiàng)的相關(guān)資料,需要的朋友可以參考下2022-11-11
JS中的算法與數(shù)據(jù)結(jié)構(gòu)之常見(jiàn)排序（Sort）算法詳解
這篇文章主要介紹了JS中的算法與數(shù)據(jù)結(jié)構(gòu)之常見(jiàn)排序（Sort）算法,結(jié)合實(shí)例形式詳細(xì)分析了js常見(jiàn)排序算法中的冒泡排序、選擇排序、插入排序、希爾排序、歸并排序、快速排序等算法相關(guān)實(shí)現(xiàn)技巧與操作注意事項(xiàng),需要的朋友可以參考下2019-08-08