基于javascript實現(xiàn)最簡單的選項卡切換效果
更新時間：2016年05月16日 15:59:29 作者：朱鵬-天羽
這篇文章主要介紹了基于javascript實現(xiàn)最簡單的選項卡切換效果的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js選項卡切換效果的具體實現(xiàn)代碼，供大家參考，具體內(nèi)容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>朱朱制作</title>
<script src="js/jquery.js" type="text/javascript"></script>
<style>
*{
margin: 0;
padding: 0;
}
body{
background-color: #fff;
font-family: "微軟雅黑";
font-size: 18px;
width: 1000px;
margin: 50px auto;
color:#000000;
}
.wrapper{
width: 350px;
}
#nav ul{
border-bottom: 2px solid yellowgreen;
height: 32px;
}
#nav li{
display: inline-block;
border: 2px solid #999;
border-bottom: none;
margin-left: 10px;
width: 65px;
text-align: center;
line-height: 30px;
}
#nav li:hover{
cursor: pointer;
}
#content{
display: block;
border: 1px solid blue;
border-top: none;
text-align: center;
height: 100px;
line-height: 100px;
}
#nav li.on{
border-bottom: solid 2px #ffffff;
}
.hide{
display: none;
}
.show{
display: block;
}
</style>
</head>
<script type="text/javascript">
/*window.onload=change; //js代碼實現(xiàn)
function change(){
this.nav=document.getElementById("nav");
this.li=nav.getElementsByTagName("li");
this.cont=document.getElementById("content");
this.divi=cont.getElementsByTagName("div");
for(var i=0;i<li.length;i++){
li[i].index=i;
li[i].onclick=function(){
for(var i=0;i<li.length;i++){
li[i].className="";
divi[i].className="hide";
}
li[this.index].className="on";
divi[this.index].className="show";
}
}
}*/
$(function(){
$('#nav li').each(function(){
$(this).click(function(){
$('#nav li').removeClass("on");
$(this).addClass("on");
$("#content div").removeClass();
$("#content div").eq($(this).index()).addClass("show").siblings().addClass("hide");
})
})
})
</script>
<body>
<div class="wrapper">
<div id="nav">
<ul>
<li class="on">num1</li>
<li>num2</li>
<li>num3</li>
<li>num4</li>
</ul>
</div><div id="content">
<div class="show">content1</div>
<div class="hide">content2</div>
<div class="hide">content3</div>
<div class="hide">content4</div>
</div>
</div>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)手寫簽名功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要為大家詳細(xì)介紹了如何利用HTML+CSS+JS實現(xiàn)中國象棋游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
通過JS解決頁面刷新導(dǎo)致按鈕OnClientClick事件消失問題
這篇文章主要介紹了如何通過JS解決頁面刷新導(dǎo)致按鈕OnClientClick事件消失問題,OnClientClick 提供客戶端JS執(zhí)行能力,并以 return false 或 return true 來決定是否繼續(xù)執(zhí)行 OnClick 事件,需要的朋友可以參考下2024-12-12
JavaScript統(tǒng)計數(shù)組中相同的數(shù)量的方法總結(jié)
在JavaScript中，我們經(jīng)常需要對數(shù)組中對象的屬性進(jìn)行統(tǒng)計。在本文中，我們將介紹如何使用JavaScript來實現(xiàn)這一功能，文中有詳細(xì)的代碼示例，需要的朋友可以借鑒參考2023-05-05
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)頁面浮動導(dǎo)航，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-01-01
JavaScript 如何刪除小數(shù)點后的數(shù)字
這篇文章主要介紹了JavaScript 刪除小數(shù)點后的數(shù)字實例代碼，代碼簡單易懂，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-07-07
JavaScript實現(xiàn)獲取dom中class的方法
這篇文章主要介紹了JavaScript實現(xiàn)獲取dom中class的方法,涉及javascript操作dom節(jié)點的使用技巧,需要的朋友可以參考下2015-02-02
這篇文章主要介紹了token 機(jī)制和實現(xiàn)方式的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)token，感興趣的朋友可以了解下2020-12-12
這篇文章主要介紹了JavaScrip如果基于url實現(xiàn)圖片下載,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-07-07
今天小編就為大家分享一篇layui select獲取自定義屬性方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08