1. 程式人生 > >左側多級菜單,高亮顯示js

左側多級菜單,高亮顯示js

navbar 菜單 高亮顯示 active ext field pos 高亮 link

左側多級菜單,如果本頁面是當前欄目,則左側菜單高亮顯示

<ul class="nav navbar-stacked" id="navs">
{dede:channelartlist typeid=‘46,46‘}


<li _id="#couse_1" class=""><a id="bb33" href="[field:typelink/]">[field:typename/]</a></li>

{/dede:channelartlist}
</ul>

<script type="text/javascript">
var myNav = document.getElementById("navs").getElementsByTagName("a");//獲取nav ul下的a連接
for(var i=0;i<myNav.length;i++){
var links = myNav[i].getAttribute("href");//獲取a裏面的連接地址
//console.log(myNav[i]);
//<a id="bb" href="[field:typelink/]">[field:typename/]</a>
//console.log(classna);
var myURL = document.location.href;//url 連接地址
//http://st.com/a/ENGLISH/Responsibilities/gaest
if(myURL.indexOf(links) != -1){//duibi
var elem = myNav[i];
var paid = elem.parentElement;//獲取父級元素
paid .className="active";//修改腹肌元素的class名
//console.log(paid);//<li></li>
//console.log(myNav[i]);//<a id="bb" href="[field:typelink/]">[field:typename/]</a>
// myNav[i].className="active_2";
}
}
</script>

左側多級菜單,高亮顯示js