javascript實現(xiàn)tab切換特效
更新時間：2015年11月12日 08:51:36 作者：浮世微涼
這篇文章主要介紹了javascript實現(xiàn)tab切換特效，實現(xiàn)的方法很簡單，特別適合初學者學習javascript實現(xiàn)tab切換特效，tab切換再也不是問題，需要的朋友可以參考下
本文為大家分享了javascript實現(xiàn)tab切換特效的方法，具體的實現(xiàn)內(nèi)容如下，先看一下效果圖：
很簡單的javascript實現(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="你好請輸入密碼" onfocus="if(this.value=='你好請輸入密碼'){value=''}" onblur="if(this.value==''){value='你好請輸入密碼'}">
</body>
</html>
這個實例只是為大家簡單介紹了javascript實現(xiàn)tab切換特效，希望對大家的學習有所幫助。
相關文章
這篇文章主要為大家詳細介紹了js實現(xiàn)貪吃蛇游戲含注釋，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-03-03
這篇文章主要介紹了京東618疊蛋糕js腳本，基于auto.js 打開，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-06-06
JavaScript字符串的判空方法有很多種,下面這篇文章主要給大家介紹了關于JavaScript中判斷字符串是否為空的幾種常用方法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-07-07
js中不存在自帶的sleep方法，要想休眠要自己定義個方法,需要的朋友可以參考下2014-07-07
split()方法將一個字符串對象的每個字符拆出來，并且將每個字符串當成數(shù)組的每個元素 reverse()方法用來改變數(shù)組，將數(shù)組中的元素倒個序排列，第一個數(shù)組元素成為最后一個，最后一個變成第一個 join()方法將數(shù)組中的所有元素邊接成一個字符串2016-04-04
這篇文章主要為大家詳細介紹了基于javascript實現(xiàn)移動端上的觸屏拖拽功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-03-03
使用setTimeout實現(xiàn)SetInterval原理解析
這篇文章主要為大家介紹了使用setTimeout實現(xiàn)SetInterval原理解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-10-10
如何獲取select下拉框的值(option沒有及有value屬性)
獲取select下拉框的值分為option沒有value屬性及有value屬性時的兩種情況，下面分別給出具體的實現(xiàn)代碼，需要的朋友可以參考下2013-11-11
這篇文章主要介紹了javascript實現(xiàn)圖片輪換動作方法，文章通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-08-08
這篇文章主要介紹了javascript算法之二叉搜索樹的示例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-09-09