jQuery點(diǎn)擊彈出下拉菜單的小例子
更新時(shí)間：2013年08月01日 15:46:34 作者：
這篇文章介紹了jQuery點(diǎn)擊彈出下拉菜單的小例子，有需要的朋友可以參考一下
復(fù)制代碼 代碼如下:
<title>導(dǎo)航——點(diǎn)擊彈出內(nèi)容</title>
<style type="text/css">
.navgation{margin:0;padding:0;list-style-type:none;position:relative;}
.navgation li {float:left;}
.navgation a{padding:3px 6px;background-color:orange;color:white;text-decoration:none;float:left;height:24px;}
.navgation a:hover {background-color:white;color:blue;text-decoration:underline;}
.navgation div{display:none;position:absolute;top:30px;}
</style>
<script src="Jquery1.7.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".navgation input").each(function () {
var this_div = $(".navgation div");
var _inx = $(".navgation input").index(this);
$(this).click(
function () { this_div.eq(_inx).slideToggle(); },
function () { this_div.eq(_inx).slideToggle(); }
);
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<ul class="navgation">
<li><input type="button" id="button" value="鏈接1"/>
<div>這里放下拉內(nèi)容1</div>
</li>
<li><input type="button" id="button1" value="鏈接2"/>
<div>這里放下拉內(nèi)容2</div>
</li>
<li><input type="button" id="button2" value="鏈接3"/>
<div>這里放下拉內(nèi)容3</div>
</li>
<li><input type="button" id="button3" value="鏈接4"/>
<div>這里放下拉內(nèi)容4</div>
</li>
<li><input type="button" id="button4" value="鏈接5"/>
<div>這里放下拉內(nèi)容5</div>
</li>
</ul>
</div>
</form>
</body>
您可能感興趣的文章:
- 用jquery實(shí)現(xiàn)下拉菜單效果的代碼
- 用jquery實(shí)現(xiàn)的一個(gè)超級簡單的下拉菜單
- Jquery帶搜索框的下拉菜單
- jquery實(shí)現(xiàn)鼠標(biāo)滑過顯示二級下拉菜單效果
- JQuery設(shè)置獲取下拉菜單某個(gè)選項(xiàng)的值(比較全)
- jquery仿京東導(dǎo)航/仿淘寶商城左側(cè)分類導(dǎo)航下拉菜單效果
- jQuery ul標(biāo)簽下拉菜單演示代碼
- 來自國外的30個(gè)基于jquery的Web下拉菜單
- jQuery實(shí)現(xiàn)的導(dǎo)航下拉菜單效果示例
- Jquery實(shí)現(xiàn)下拉菜單案例
相關(guān)文章
今天總結(jié)一下學(xué)習(xí)jQuery時(shí)中遇到的一些常用的jQuery代碼，這些代碼片段可能在我們急需的時(shí)候能起到幫助。2011-07-07
一個(gè)復(fù)雜查詢的頁面，字段太多了，填了一次，想清空挺麻煩的，于是想到了jquery，下面是實(shí)現(xiàn)代碼2014-08-08
jQuery實(shí)現(xiàn)仿新浪微博浮動(dòng)的消息提示框(可智能定位)
這篇文章主要介紹了jQuery實(shí)現(xiàn)仿新浪微博浮動(dòng)的消息提示框,具有智能定位功能,涉及jQuery控制頁面元素浮動(dòng)效果的實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-10-10
jQuery 1.9移除了$.browser可以使用$.support來替代
這篇文章主要介紹jQuery 1.9 移除了 $.browser 的替代方法,需要的朋友可以參考下2014-09-09
基于jQuery的ajax功能實(shí)現(xiàn)web service的json轉(zhuǎn)化
前面文章說過下次會(huì)給大家介紹詳細(xì)的基于web Services的JqueryAjax調(diào)用如何把一個(gè)datatable得數(shù)據(jù)轉(zhuǎn)化成JSON數(shù)據(jù),然后在客戶端再通過json2.js轉(zhuǎn)化成javascript對象。2009-08-08
JS·經(jīng)典·炫彩菜單(動(dòng)畫效果) for jquery2010-01-01
jquery.fastLiveFilter.js實(shí)現(xiàn)輸入自動(dòng)過濾的方法
這篇文章主要介紹了jquery.fastLiveFilter.js實(shí)現(xiàn)輸入自動(dòng)過濾的方法,涉及jquery鼠標(biāo)事件及字符串遍歷的相關(guān)技巧,簡單實(shí)用,需要的朋友可以參考下2015-08-08
jquery插件canvaspercent.js實(shí)現(xiàn)百分比圓餅效果
這篇文章主要為大家詳細(xì)介紹了jquery插件canvaspercent.js實(shí)現(xiàn)百分比圓餅效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)輪播圖及其原理，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-08-08
jquery開發(fā)過程中經(jīng)驗(yàn)豐富可以提高開發(fā)技巧，本文整理了一些常見的jquery開發(fā)技巧，有需要的朋友可以參考下2013-01-01