欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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)文章

最新評(píng)論