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