簡(jiǎn)單的jquery左側(cè)導(dǎo)航欄和頁(yè)面選中效果
這里是要實(shí)現(xiàn)導(dǎo)航的左側(cè)并選中的,此功能需引用jquery
左側(cè)導(dǎo)航:
<div class="box">
<ul class="menu">
<li class="level1">
<a href="#none" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >襯衫</a>
<ul class="level2">
<li><a href="#none" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >短袖襯衫</a></li>
<li><a href="#none" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >長(zhǎng)袖襯衫</a></li>
<li><a href="#none" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >短袖T恤</a></li>
<li><a href="#none" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >長(zhǎng)袖T恤</a></li>
</ul>
</li>
<li class="level1">
<a href="#none" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >衛(wèi)衣</a>
<ul class="level2">
<li><a href="#none" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >開(kāi)襟衛(wèi)衣</a></li>
<li><a href="#none" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >套頭衛(wèi)衣</a></li>
<li><a href="#none" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >運(yùn)動(dòng)衛(wèi)衣</a></li>
<li><a href="#none" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >童裝衛(wèi)衣</a></li>
</ul>
</li>
<li class="level1">
<a href="#none" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >褲子</a>
<ul class="level2">
<li><a href="#none" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >短褲</a></li>
<li><a href="#none" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >休閑褲</a></li>
<li><a href="#none" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >牛仔褲</a></li>
<li><a href="#none" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >免燙卡其褲</a></li>
</ul>
</li>
</ul>
</div>
js代碼:
<script type="text/javascript">
//等待dom元素加載完畢.
$(document).ready(function(){
$(".level1 > a").click(function(){
$(this).addClass("current") //給當(dāng)前元素添加"current"樣式
.next().show() //下一個(gè)元素顯示
.parent().siblings().children("a").removeClass("current") //父元素的兄弟元素的子元素<a>移除"current"樣式
.next().hide(); //它們的下一個(gè)元素隱藏
return false;
});
});
</script>
/* reset */
body{margin:0;padding:0 0 12px 0;font-size:12px;line-height:22px;font-family:"\5b8b\4f53","Arial Narrow";background:#fff;}
form,ul,li,p,h1,h2,h3,h4,h5,h6{margin:0;padding:0;}
input,select{font-size:12px;line-height:16px;}
img{border:0;}
ul,li{list-style-type:none;}
a {color:#00007F;text-decoration:none;}
a:hover {color:#bd0a01;text-decoration:underline;}
.box {
width: 150px;
margin: 0 auto;
}
.menu{
overflow:hidden;
border-color: #C4D5DF;
border-style: solid;
border-width: 0 1px 1px;
}
/* lv1 */
.menu li.level1 a{
display: block;
height: 28px;
line-height: 28px;
background:#EBF3F8;
font-weight:700;
color: #5893B7;
text-indent: 14px;
border-top: 1px solid #C4D5DF;
}
.menu li.level1 a:hover{text-decoration:none;}
.menu li.level1 a.current{background:#B1D7EF;}
/* lv2 */
.menu li ul{overflow:hidden;}
.menu li ul.level2{display:none;}
.menu li ul.level2 li a{
display: block;
height: 28px;
line-height: 28px;
background:#ffffff;
font-weight:400;
color: #42556B;
text-indent: 18px;
border-top: 0px solid #ffffff;
overflow: hidden;
}
.menu li ul.level2 li a:hover{
color:#f60;
}
<script type="text/javascript">
$(document).ready(function(){
$(".level2 a").each(function(){
$this = $(this);
if($this[0].href==String(window.location)){
$this.addClass("hover");
}
});
});
</script>

- JQuery實(shí)現(xiàn)電梯導(dǎo)航特效
- jQuery實(shí)現(xiàn)電梯導(dǎo)航模塊
- jquery 面包屑導(dǎo)航 具體實(shí)現(xiàn)
- jquery實(shí)現(xiàn)點(diǎn)擊變換導(dǎo)航樣式的方法
- jquery仿京東導(dǎo)航/仿淘寶商城左側(cè)分類(lèi)導(dǎo)航下拉菜單效果
- JQuery實(shí)現(xiàn)鼠標(biāo)滑過(guò)顯示導(dǎo)航下拉列表
- JQuery 浮動(dòng)導(dǎo)航欄實(shí)現(xiàn)代碼
- 基于jquery實(shí)現(xiàn)導(dǎo)航菜單高亮顯示(兩種方法)
- jQuery 頂部導(dǎo)航跟隨滾動(dòng)條滾動(dòng)固定浮動(dòng)在頂部
- 使用jquery庫(kù)實(shí)現(xiàn)電梯導(dǎo)航效果
相關(guān)文章
jQuery三組基本動(dòng)畫(huà)與自定義動(dòng)畫(huà)操作實(shí)例總結(jié)
這篇文章主要介紹了jQuery三組基本動(dòng)畫(huà)與自定義動(dòng)畫(huà)操作,結(jié)合實(shí)例形式總結(jié)了jQuery基本動(dòng)畫(huà)函數(shù)與自定義動(dòng)畫(huà)相關(guān)操作技巧及使用注意事項(xiàng),需要的朋友可以參考下2020-05-05
基于Jquery的$.cookie()實(shí)現(xiàn)跨越頁(yè)面tabs導(dǎo)航實(shí)現(xiàn)代碼
基于Jquery的$.cookie()實(shí)現(xiàn)跨越頁(yè)面tabs導(dǎo)航實(shí)現(xiàn)代碼,需要的朋友可以參考下。2011-03-03
jquery Easyui快速開(kāi)發(fā)總結(jié)
easyui是一種基于jQuery的用戶界面插件集合,easyui為創(chuàng)建現(xiàn)代化,互動(dòng),JavaScript應(yīng)用程序,提供必要的功能,本篇文章給大家整理有關(guān)jquery Easyui快速開(kāi)發(fā)的技巧,需要的朋友可以參考下2015-08-08
jQuery選擇id屬性帶有點(diǎn)符號(hào)元素的方法
這篇文章主要介紹了jQuery選擇id屬性帶有點(diǎn)符號(hào)元素的方法,涉及jQuery選擇器的使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-03-03
jQuery+ajax實(shí)現(xiàn)文件上傳功能
這篇文章主要為大家詳細(xì)介紹了jQuery+ajax實(shí)現(xiàn)文件上傳,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-12-12
jQuery簡(jiǎn)單實(shí)現(xiàn)提交數(shù)據(jù)出現(xiàn)loading進(jìn)度條的方法
這篇文章主要介紹了jQuery簡(jiǎn)單實(shí)現(xiàn)提交數(shù)據(jù)出現(xiàn)loading進(jìn)度條的方法,涉及jQuery的ajax調(diào)用及頁(yè)面樣式操作技巧,需要的朋友可以參考下2016-03-03
基于jquery的網(wǎng)頁(yè)SELECT下拉框美化代碼
基于CSS 和JS的網(wǎng)頁(yè)SELECT下拉框美化,JQUERY 插件,最近為公司的網(wǎng)頁(yè)制做部,開(kāi)發(fā)了一個(gè)用于美化網(wǎng)頁(yè)上select 下拉框的JQUERY插件,拿來(lái)與大家分享。2010-10-10

