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>熱門</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)文章

js實(shí)現(xiàn)貪吃蛇游戲含注釋
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)貪吃蛇游戲含注釋，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-03-03
2020京東618疊蛋糕js腳本(親測(cè)好用)
這篇文章主要介紹了京東618疊蛋糕js腳本，基于auto.js 打開(kāi)，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-06-06
JavaScript中判斷字符串是否為空的幾種常用方法
JavaScript字符串的判空方法有很多種,下面這篇文章主要給大家介紹了關(guān)于JavaScript中判斷字符串是否為空的幾種常用方法,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-07-07
js中自定義方法實(shí)現(xiàn)停留幾秒sleep
js中不存在自帶的sleep方法，要想休眠要自己定義個(gè)方法,需要的朋友可以參考下
2014-07-07
字符串反轉(zhuǎn)_JavaScript
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ù)的示例代碼
這篇文章主要介紹了javascript算法之二叉搜索樹(shù)的示例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-09-09