javascript實(shí)現(xiàn)tab切換特效
更新時(shí)間：2015年11月12日 08:51:36 作者：浮世微涼
這篇文章主要介紹了javascript實(shí)現(xiàn)tab切換特效，實(shí)現(xiàn)的方法很簡(jiǎn)單，特別適合初學(xué)者學(xué)習(xí)javascript實(shí)現(xiàn)tab切換特效，tab切換再也不是問(wèn)題，需要的朋友可以參考下
本文為大家分享了javascript實(shí)現(xiàn)tab切換特效的方法，具體的實(shí)現(xiàn)內(nèi)容如下，先看一下效果圖：
很簡(jiǎn)單的javascript實(shí)現(xiàn)tab切換特效
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Tab</title>
<script src="js/jquery-1.11.1.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 184px;
height: 100px;
border: 1px solid gray;
display: none;
}
.tab{
list-style: none;
width: 200px;
overflow: hidden;
}
.tab li{
float: left;
width: 60px;
border: 1px solid red;
height: 30px;
line-height: 30px;
vertical-align: middle;
text-align: center;
cursor: pointer;
}
.on{
display: block;
}
.cur{
background: red;
color: #fff;
}
</style>
<script>
$(function(){
$('.tab li').hover(function(){
$(this).addClass('cur').siblings().removeClass('cur');
$("div").eq($(this).index()).addClass("on").siblings().removeClass('on');
})
})
</script>
</head>
<body>
<ul class="tab">
<li class="cur">最新</li>
<li>熱門(mén)</li>
<li>新聞</li>
</ul>
<div class="on">11</div>
<div>22</div>
<div>33</div>
<br/>
<input type="text" value="你好請(qǐng)輸入密碼" onfocus="if(this.value=='你好請(qǐng)輸入密碼'){value=''}" onblur="if(this.value==''){value='你好請(qǐng)輸入密碼'}">
</body>
</html>
這個(gè)實(shí)例只是為大家簡(jiǎn)單介紹了javascript實(shí)現(xiàn)tab切換特效，希望對(duì)大家的學(xué)習(xí)有所幫助。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)貪吃蛇游戲含注釋，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-03-03
這篇文章主要介紹了京東618疊蛋糕js腳本，基于auto.js 打開(kāi)，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-06-06
JavaScript字符串的判空方法有很多種,下面這篇文章主要給大家介紹了關(guān)于JavaScript中判斷字符串是否為空的幾種常用方法,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-07-07
js中自定義方法實(shí)現(xiàn)停留幾秒sleep
js中不存在自帶的sleep方法，要想休眠要自己定義個(gè)方法,需要的朋友可以參考下2014-07-07
split()方法將一個(gè)字符串對(duì)象的每個(gè)字符拆出來(lái)，并且將每個(gè)字符串當(dāng)成數(shù)組的每個(gè)元素 reverse()方法用來(lái)改變數(shù)組，將數(shù)組中的元素倒個(gè)序排列，第一個(gè)數(shù)組元素成為最后一個(gè)，最后一個(gè)變成第一個(gè) join()方法將數(shù)組中的所有元素邊接成一個(gè)字符串2016-04-04
javascript實(shí)現(xiàn)移動(dòng)端上的觸屏拖拽功能
這篇文章主要為大家詳細(xì)介紹了基于javascript實(shí)現(xiàn)移動(dòng)端上的觸屏拖拽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-03-03
使用setTimeout實(shí)現(xiàn)SetInterval原理解析
這篇文章主要為大家介紹了使用setTimeout實(shí)現(xiàn)SetInterval原理解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10
如何獲取select下拉框的值(option沒(méi)有及有value屬性)
獲取select下拉框的值分為option沒(méi)有value屬性及有value屬性時(shí)的兩種情況，下面分別給出具體的實(shí)現(xiàn)代碼，需要的朋友可以參考下2013-11-11
javascript實(shí)現(xiàn)圖片輪換動(dòng)作方法
這篇文章主要介紹了javascript實(shí)現(xiàn)圖片輪換動(dòng)作方法，文章通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
這篇文章主要介紹了javascript算法之二叉搜索樹(shù)的示例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-09-09