js栏目高亮

JavaScript07

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')

}

首先，解析 HTML 有两种办法：

一种是基于事件回调的：比如 python 的 HTMLParser 和 PHP 的 SimpleXML。它在遇到 starttag、endtag 以及遇到 text node 时就调用你指定的函数。

第二种是建立起一个完整的 DOM 树，让你进行 DOM 操作。

现在的问题就是应该怎么定义“不同”。

如果你指的只是 text node 的 text content 不同，而 node tree 的结构完全相同的话，就很容易了，此时你可以使用第一种解析 HTML 的方法；只需要把第一个页面所有的 text node 按顺序存下来；然后把第二个 HTML 的所有 text node 与之一一比对就 ok 了。

如果页面结构都不同的话，就会复杂些。这种情况下可以用第二种解析 HTML 的方法建立起 DOM 树；然后可以一层一层递归地比对innerHTML：具体来说，比如你先比对<body>的 innerHTML。如果不一致的话，就一一比对其下所有元素的innerHTML。然后把其中innerHTML相同的节点忽略；对innerHTML不相同的节点再递归地进行处理。如果遇到某个元素在两个文档里的childNode数量不一的情况……那就看你想怎么办了。