jQuery實(shí)現(xiàn)類似滑動(dòng)門(mén)切換效果的層切換
更新時(shí)間：2013年09月23日 15:42:15 作者：
滑動(dòng)門(mén)切換效果想必大家都有見(jiàn)到過(guò)吧，在本文為大家介紹下jQuery是如何實(shí)現(xiàn)層切換的
復(fù)制代碼 代碼如下:
<!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)門(mén)切換，jQuery層切換代碼</title>
<script type="text/javascript" src="http://www.dbjr.com.cn/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>
您可能感興趣的文章:
- jQuery實(shí)現(xiàn)的經(jīng)典滑動(dòng)門(mén)效果
- 基于jquery自己寫(xiě)tab滑動(dòng)門(mén)(通用版)
- jQuery實(shí)現(xiàn)自動(dòng)切換播放的經(jīng)典滑動(dòng)門(mén)效果
- jQuery實(shí)現(xiàn)的多滑動(dòng)門(mén)，多選項(xiàng)卡效果代碼
- jquery實(shí)現(xiàn)標(biāo)題字體變換的滑動(dòng)門(mén)菜單效果
- 使用jquery實(shí)現(xiàn)div的tab切換實(shí)例代碼
- jQuery簡(jiǎn)單tab切換效果實(shí)現(xiàn)方法
- jquery實(shí)現(xiàn)簡(jiǎn)單Tab切換菜單效果
- jQuery簡(jiǎn)單幾行代碼實(shí)現(xiàn)tab切換
- jQuery+css實(shí)現(xiàn)的tab切換標(biāo)簽(兼容各瀏覽器)
- Jquery滑動(dòng)門(mén)/tab切換實(shí)現(xiàn)方法完整示例
相關(guān)文章
jQuery load方法用法集錦,學(xué)習(xí)jquery的朋友可以參考下。2011-12-12
Jquery Easyui對(duì)話框組件Dialog使用詳解（14）
這篇文章主要為大家詳細(xì)介紹了Jquery Easyui對(duì)話框組件Dialog的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
Jquery index()方法 獲取相應(yīng)元素索引值
昨天做一個(gè)Jqery效果，要獲取相應(yīng)元素的索引值，暈，又忘記了?，F(xiàn)在記錄下來(lái)，以后再次忘記好查怎么獲取相應(yīng)元素的索引值2012-10-10
jQuery實(shí)現(xiàn)表單提交時(shí)判斷的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)表單提交時(shí)判斷的方法,涉及針對(duì)表單提交時(shí)的判斷方法,是非常實(shí)用的技巧,需要的朋友可以參考下2014-12-12
這篇文章主要介紹了7個(gè)有用的jQuery技巧分享,本文給出了在新窗口打開(kāi)鏈接、設(shè)置等高的列、jQuery預(yù)加載圖像、禁用鼠標(biāo)右鍵、設(shè)定計(jì)時(shí)器等實(shí)用代碼片段,需要的朋友可以參考下2015-05-05
jQuery實(shí)現(xiàn)菜單式圖片滑動(dòng)切換
這篇文章主要介紹了jQuery實(shí)現(xiàn)菜單式圖片滑動(dòng)切換效果，主要是依托于jQuery Lightbox插件來(lái)實(shí)現(xiàn)，非常炫酷，這里推薦給小伙伴們2015-03-03
jQuery根據(jù)緯度經(jīng)度查看地圖處理程序
jQuery根據(jù)緯度經(jīng)度查看地圖處理程序如下在這里要注意js的引入順序，有需求的朋友可以參考下哈希望對(duì)你有所幫助2013-05-05
jquery插件實(shí)現(xiàn)鼠標(biāo)隱藏
這篇文章主要為大家詳細(xì)介紹了jquery插件實(shí)現(xiàn)鼠標(biāo)隱藏，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-05-05
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)無(wú)縫輪播圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
jQuery CSS3相結(jié)合實(shí)現(xiàn)時(shí)鐘插件
這篇文章主要介紹了jQuery CSS3相結(jié)合實(shí)現(xiàn)時(shí)鐘插件附源碼下載的相關(guān)資料,需要的朋友可以參考下2016-01-01