jquery實現(xiàn)可自動收縮的TAB網(wǎng)頁選項卡代碼
更新時間：2015年09月06日 11:05:18 作者：企鵝
這篇文章主要介紹了jquery實現(xiàn)可自動收縮的TAB網(wǎng)頁選項卡代碼,涉及jquery鼠標事件及頁面元素樣式變換的實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了jquery實現(xiàn)可自動收縮的TAB網(wǎng)頁選項卡代碼。分享給大家供大家參考。具體如下：
這是一款可自動收縮的TAB選項卡網(wǎng)頁代碼，當把鼠標放在標簽上的時候，標簽所屬的內(nèi)容自動展開，鼠標移走或移到其它標簽的時候，選項卡自動收縮隱藏起來，第二個選項卡伸展開來，動畫效果挺流暢，不錯的網(wǎng)頁特效。
運行效果截圖如下：
在線演示地址如下：
http://demo.jb51.net/js/2015/jquery-hidden-show-tab-cha-nav-menu-codes/
具體代碼如下：
<!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>Tab選項卡，自動伸縮代碼</title>
<script type="text/javascript" src="jquery1.3.2.js"></script>
<style type="text/css">
body,h1,div,ul,li{ margin:0; padding:0;}
li{ list-style:none;}
.demo{ width:300px; margin:30px auto; position:relative;}
.demo li{ float:left; padding:0 15px; cursor:pointer; height:30px; line-height:30px;}
.d-bk{}
.demo li.cur{ background-color:#F00; color:#FFF;}
.demo li .d-bk{ border:1px solid #F00; width:300px; height:150px; background-color:#f1f1f1; position:absolute; left:0; top:30px; color:#333;display:none;}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(".demo li").hover(function(){
$(this).addClass("cur");
$(this).children(".d-bk").slideDown();
}).mouseout(function(){
$(".demo li").removeClass("cur");
$(this).children(".d-bk").slideUp();
})
})
</script>
</head>
<body>
<ul class="demo">
<li>
aaaa
<div class="d-bk">111</div>
</li>
<li>
bbbb
<div class="d-bk">222</div>
</li>
<li>
cccc
<div class="d-bk">333</div>
</li>
</ul>
</body>
</html>
希望本文所述對大家的jquery程序設(shè)計有所幫助。
相關(guān)文章
這篇文章主要介紹了jQuery實現(xiàn)checkbox全選的方法,涉及jQuery操作頁面元素屬性及鼠標事件響應(yīng)的相關(guān)技巧,需要的朋友可以參考下2015-06-06
這篇文章主要為大家詳細介紹了jquery實現(xiàn)手風(fēng)琴案例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
這篇文章主要為大家詳細介紹了基于jquery實現(xiàn)五星好評，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
下面小編就為大家?guī)硪黄獪\析jquery unbind()方法移除元素綁定的事件。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
jQuery+CSS實現(xiàn)的網(wǎng)頁二級下滑菜單效果
這篇文章主要介紹了jQuery+CSS實現(xiàn)的網(wǎng)頁二級下滑菜單效果,涉及jquery鼠標hover事件及show與hide操作頁面元素的顯示與隱藏效果,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
JQuery實現(xiàn)表格數(shù)據(jù)行上移與下移
這篇文章主要為大家詳細介紹了JQuery實現(xiàn)表格數(shù)據(jù)行上移與下移，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
這篇文章主要介紹了IDEA配置jQuery, $符號不再顯示黃色波浪線的問題，本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-10-10
在jquery中我們要動態(tài)的修改css屬性我們只要使用css()方法就可以實現(xiàn)了，下面我來給大家詳細介紹介紹。2015-05-05
jQuery動態(tài)添加 input type=file的實現(xiàn)代碼
有時候需要在頁面上允許用戶上傳多個文件，個數(shù)由用戶自己決定，個數(shù)多了也可以刪除，使用jQuery可以很簡單的實現(xiàn)這個功能2012-06-06
這篇文章主要介紹了jQuery編程中的一些核心方法,jQuery是當下人氣最高的JavaScript庫,需要的朋友可以參考下2015-08-08