js栏目高亮

JavaScript017

js栏目高亮,第1张

比如说新闻中心高亮:添加个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')

}

var menu = document.getElementById('menu')

var links = menu.getElementsByTagName('a')

for (var i = 0 i < links.length i++) {

    links[i].onclick = function () {

        for (var j = 0 j < links.length j++) {

            if(links[j] == this) {

                this.style.color = 'red'

            } else {

                links[j].style.color = ''

            }

        }

    }

}

点击链接之后会刷新页面。改了颜色换了页之后也不会有效果啊。

这是当然的,页面都跳转了,样式肯定不可能自动转到刷新后的页面啦,否则的话如果我的网站通过链接跳转到百度的页面,而刚好我网站的样式与百度的重叠,那么页面就会乱糟糟了。

而前面那两个链接并没有刷新页面,还是在当前页面,肯定就有效果啦。

你应该给每个页面指定一个编号,这样在页面加载时再把对应的导航菜单叠加上active类,比如第3个页面可以这样:

var pageId=2  //2是第三个页面(从0起算)

$(function(){

   $(".nav a").removeClass("active")  //如果每个菜单默认是没有active类的,此行可省略

   $(".nav a").eq(pageId).addClass("active")

})

当然,也可以根据当前页面的文件名或其他信息来决定让哪个菜单项为当前项。总之,你不要指望在当前页面去直接控制跳转后的页面样式。