JQuery導航菜單選擇特效
更新時間：2016年04月11日 09:24:46 投稿：mrr
這篇文章主要介紹了JQuery導航菜單選擇特效 的相關資料,需要的朋友可以參考下
一、實現(xiàn)效果
1.初始化效果：未添加樣式和特效
2、添加CSS樣式
3、最終效果
二、JQuery代碼
<!--編寫JQuery代碼-->
<script type="text/javascript">
$(document).ready(function(){
$(".level>a").click(function(){
$(this).addClass("current") //給當前元素添加current樣式
.next().show() //下一個元素顯示
.parent().siblings().children("a").removeClass("current") //父元素的同輩元素的子元素<a>移除“current”樣式
.next().hide(); //他們的下一個元素隱藏
return false;
})
})
</script>
三、完整代碼
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-">
<title>JQuery制作導航欄</title>
<script type="text/javascript" src="../JQuery庫文件/jquery-...min.js"></script> <!--引入JQuery庫文件-->
<style type="text/css">
/*設置通用樣式*/
*{
padding: ;
margin: ;
}
.box{
margin: auto;
border: solid #BEBEBE px;
width: px;
}
ul{
list-style: none;
}
a {
color:#F;
text-decoration:none;
line-height: px;
}
/*level*/
.level a{
display: block; /*!!!轉換為塊狀元素*/
height: px;
width: px;
background-color: #EBFF;
padding-left: px;
border: solid px #BEBEBE;
}
.level a.current{
background-color:#BDEF;
}
/*level*/
.level a{
background: #ffffff;
color: #EEE;
border: none;
}
.level a:hover {
color:red;
}
.level{
display: none;
}
</style>
<!--編寫JQuery代碼-->
<script type="text/javascript">
$(document).ready(function(){
$(".level>a").click(function(){
$(this).addClass("current") //給當前元素添加current樣式
.next().show() //下一個元素顯示
.parent().siblings().children("a").removeClass("current") //父元素的同輩元素的子元素<a>移除“current”樣式
.next().hide(); //他們的下一個元素隱藏
return false;
})
})
</script>
</head>
<body>
<div class="box">
<ul class="menu">
<li class="level">
<a href="#">襯衫</a>
<ul class="level">
<li><a href="#">短袖襯衫</a></li>
<li><a href="#">長袖襯衫</a></li>
<li><a href="#">短袖T恤</a></li>
<li><a href="#">長袖T恤</a></li>
</ul>
</li>
<li class="level">
<a href="#">衛(wèi)衣</a>
<ul class="level">
<li><a href="#">開襟衛(wèi)衣</a></li>
<li><a href="#">套頭衛(wèi)衣</a></li>
<li><a href="#">運動衛(wèi)衣</a></li>
<li><a href="#">童裝衛(wèi)衣</a></li>
</ul>
</li>
<li class="level">
<a href="#">褲子</a>
<ul class="level">
<li><a href="#">短褲</a></li>
<li><a href="#">休閑褲</a></li>
<li><a href="#">牛仔褲</a></li>
<li><a href="#">免燙卡其褲</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
相關文章
jQuery實現(xiàn)的網站banner圖片無縫輪播效果完整實例
這篇文章主要介紹了jQuery實現(xiàn)的網站banner圖片無縫輪播效果,結合完整實例形式分析了jQuery結合時間函數(shù)實現(xiàn)圖片定時輪播切換相關操作技巧,需要的朋友可以參考下2019-01-01
這篇文章主要介紹了jquery ajax分頁插件的簡單實現(xiàn)的相關資料,需要的朋友可以參考下2016-01-01
iframe里面的元素觸發(fā)父窗口元素事件的jquery代碼
這篇文章主要介紹了jquery:iframe里面的元素怎樣觸發(fā)父窗口元素的事件，很簡單，但很實用，需要的朋友可以看看2014-10-10
JQuery.validate在ie8下不支持的快速解決方法
下面小編就為大家?guī)硪黄狫Query.validate在ie8下不支持的快速解決方法。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考，一起跟隨小編過來看看吧2016-05-05
最近在項目開發(fā)中遇到這樣的需求，點擊購買按鈕，模擬拋物線將物品彈到購物車里，購物車添加物品后，顯示+1動畫。效果非常棒，接下來小編把實例代碼分享到腳本之家平臺，需要的的朋友參考下吧2017-05-05
jQuery使用手冊之二 DOM操作...2007-03-03
。這款導航菜單，初始時頁面中間一個按鈕，單擊按鈕，菜單從左側飛入頁中。再次單擊按鈕，導航飛入左側消息2014-11-11
這篇文章主要介紹了jQuery+ajax+asp.net獲取Json值的方法,涉及jQuery的ajax技術與asp.net后臺交互的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2016-06-06
項目遇到一個消息的模塊,在導航條最上面.想實現(xiàn),當收到消息的時候能夠及時的刷新,顯示收到消息的條數(shù)，下面為大家介紹兩種不錯的方法，感興趣的朋友可以參考下2014-01-01
jquery easyui combobox模糊過濾(示例代碼)
這篇文章主要介紹了jquery easyui combobox模糊過濾(示例代碼)。需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11