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