如何实现所在页面导航高亮显示

JavaScript028

如何实现所在页面导航高亮显示,第1张

导航高亮显示当前页:

一、先定义一个CSS,比如:

<style>

.changebg{background-color:#FFCC00}

</style>

二、给导航所在的区域设置ID,这个区域我不知道你是怎么做的,比如div,td或li等,但都要设置ID,比如分别为:sy,gsjj,gsxw

三、每个页都有页名,这个一般已经设置好了。比如:首页、公司简介、公司新闻。

四、每个页上添加js代码

<div id="head">

<ul>

<li id="sy" class="li1"><a href="indexl" target="_blank">首页</a></li>

<li id="gsjj" class="li1"><a href="gsjjl" target="_blank">公司简介</a></li>

<li id="gsxw" class="li1"><a href="gsxwl" target="_blank">公司新闻</a></li>

</ul>

</div>

<script>

links="sy|gsjj|gsxw"

pagename="首页|公司简介|公司新闻"

links_in=links.split("|")

pagename_in=pagename.split("|")

for(i=0i<pagename_in.lengthi++){

if(pagename_in[i]==document.title){

document.getElementByIdx_x(links_in[i]).className="changebg"

break

}

}

</script>

比如说新闻中心高亮:添加个class active

.active{ background-color:red}

<div class="ny_left_dh_wxz active" id="div1"><a href="[!--news.url--]news">新闻中心</a></div>

或者 添加个onclick = 'activeMenu(this)'

function activeMenu(_this){

$('.ny_left_dh_wxz').each(function(){

$(this).removeClass('active')

})

$(_this).addClass('active')

}