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切換特效，希望對大家的學習有所幫助。
相關(guān)文章
將頁面table內(nèi)容與樣式另存成excel文件的方法
本文分析一下將頁面table內(nèi)容與樣式另存成excel文件的方法，主要介紹style與class之間的區(qū)別問題。2015-08-08
通過JS得到當前焦點的坐標,如何實現(xiàn)，接下來詳細介紹實現(xiàn)步驟，有需要的朋友可以參考下2013-01-01
這篇文章主要為大家介紹了JS前端攻堅淺析instanceof實現(xiàn)原理詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
本文向大家詳細展示了從C#程序員的視角學習TypeScript的過程，主要是針對這兩種語言的異同進行了簡單的對比學習，希望對大家能夠有所幫助。2015-06-06
如何在javascript 中使用 xmlHttpRequest 發(fā)送 POST
本文將通過不同的示例解釋如何使用JavaScript代碼在AJAX編程中發(fā)送 XMLHttpRequest post 請求，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友參考下吧2023-07-07
這篇文章主要介紹了addEventListener 的用法,需要的朋友可以參考下2014-05-05
這篇文章主要介紹了js實現(xiàn)多圖左右切換功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08
本文主要介紹了JS跳過debugger的幾種方法小結(jié)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-07-07
JavaScript實現(xiàn)獲取img的原始尺寸的方法詳解
在微信小程序開發(fā)時，它的image標簽有一個默認高度，這樣你的圖片很可能出現(xiàn)被壓縮變形的情況，所以就需要獲取到圖片的原始尺寸對image的寬高設置，本文就來分享一下JavaScript實現(xiàn)獲取img的原始尺寸的方法吧2023-03-03
這篇文章主要介紹了js中split和replace的用法,實例分析了split和replace的功能及使用技巧,需要的朋友可以參考下2015-02-02