快捷導(dǎo)航

jQuery實(shí)現(xiàn)類似滑動(dòng)門切換效果的層切換

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

滑動(dòng)門切換效果想必大家都有見到過吧，在本文為大家介紹下jQuery是如何實(shí)現(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>滑動(dòng)門切換，jQuery層切換代碼</title> 
<script type="text/javascript" src="http://m.fzitv.net/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"> 
第一個(gè)div內(nèi)容 
</div> 
<div class="div none"> 
第二個(gè)div內(nèi)容 
</div> 
</body> 
</html> 

您可能感興趣的文章:

相關(guān)文章

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