jQuery實現(xiàn)類似滑動門切換效果的層切換

更新時間：2013年09月23日 15:42:15 作者：

滑動門切換效果想必大家都有見到過吧，在本文為大家介紹下jQuery是如何實現(xiàn)層切換的

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>滑動門切換，jQuery層切換代碼</title> 
<script type="text/javascript" src="http://www.dhdzp.com/ajaxjs/jquery-1.6.2.min.js"></script> 
<script type="text/javascript"> 
$(function(){ 
$("ul li").each(function(i){ 
$(this).hover(function(){ 
$(this).addClass("bg").siblings().removeClass("bg"); 
$(".div:eq("+i+")").show().siblings(".div").hide(); 
}) 
}) 
}) 
</script> 
<style type="text/css"> 
*{ margin:0; padding:0; font-size:12px;} 
ul li{ list-style:none; float:left; background-color:#999; cursor:pointer; width:100px; height:25px; line-height:25px; text-align:center;} 
ul li.bg{ background-color:#9F0;} 
.clr{ clear:both;} 
.div{width:200px; height:60px; background:#666; line-height:60px; text-align:center;} 
.none{ display:none} 
</style> 
</head> 
<body> 
<ul><li class="bg">賬戶信息</li><li>郵寄地址</li></ul> 
<div class="clr"></div> 
<div class="div"> 
第一個div內(nèi)容 
</div> 
<div class="div none"> 
第二個div內(nèi)容 
</div> 
</body> 
</html> 

您可能感興趣的文章:

相關(guān)文章

jQuery手機撥號界面特效代碼分享
這篇文章主要介紹了jQuery手機撥號界面特效，整體特效非常逼真自然，推薦給大家，有需要的小伙伴可以參考下。
2015-08-08
jQuery實現(xiàn)獲取table表格第一列值的方法
這篇文章主要介紹了jQuery實現(xiàn)獲取table表格第一列值的方法,涉及jQuery針對table表格元素的遍歷與讀取相關(guān)技巧,需要的朋友可以參考下
2016-03-03
jQuery簡單設(shè)置文本框回車事件的方法
這篇文章主要介紹了jQuery簡單設(shè)置文本框回車事件的方法,涉及jQuery簡單事件綁定與響應(yīng)操作相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2016-08-08
jquery插件推薦瀏覽器嗅探userAgent
這里給大家推薦一款瀏覽器嗅探的jQuery插件useragent，兼容各大瀏覽器，在做項目的時候經(jīng)常要用到，非常的實用
2014-11-11
jQuery隨機密碼生成的方法
這篇文章主要介紹了jQuery隨機密碼生成的方法,實例分析了jQuery操作隨機數(shù)的技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-03-03
jquery1.5.1中根據(jù)元素ID獲取元素對象的代碼
盡管聽說jquery的大名幾年了，但是一直沒有使用過。這兩天想在項目中使用被一些小細(xì)節(jié)折騰的夠嗆，看來jquery沒有傳說中的那么好學(xué)。
2011-04-04
jquery插件制作簡單示例說明
今天剛剛把jquery的插件制作學(xué)習(xí)了一下，總結(jié)一下別人寫的和自己的心得，方便其他初學(xué)者的學(xué)習(xí)，考慮到要學(xué)習(xí)jquery插件制作的人一定知道jquery插件的好處和通用性，這里就不多說
2012-02-02
jQuery性能優(yōu)化的38個建議
想必大家對于jQuery這個最流行的javascript類庫都不陌生，而且只要是前端開發(fā)人員肯定或多或少的使用或者接觸過，在這篇文章中，參考了一些資料及實際使用效率，將介紹一些書寫高質(zhì)量jQuery代碼的原則，不單單會告訴你如何去書寫，也會告訴你為什么這樣書寫，希望大家會覺得有所幫助
2014-03-03
jQuery 淡出一個圖像到另一個圖像的實現(xiàn)代碼
這篇文章主要介紹了jquery的hover事件實現(xiàn)兩個圖片的淡出切換效果，需要的朋友可以參考下
2013-06-06
jWiard 基于JQuery的強大的向?qū)Э丶榻B
jWiard 基于JQuery的強大的向?qū)Э丶榻B，需要的朋友可以參考下。
2011-10-10