js栏目高亮

JavaScript05

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

}

<script type="text/javascript">

/**

 *由于你的代码很多,而我只更改了JavaScript部分,所以我只发JS部分了。

 *

 *另外,我改动的地方都做了注释,具体详见:

 */

 var obj = document.getElementById("frameContent")//获取内容层

var pages = document.getElementById("pages")//获取翻页层

window.onload = function()//重写窗体加载的事件

{

    var allpages = Math.ceil(parseInt(obj.scrollHeight)/parseInt(obj. offsetHeight))//获取页面数量

    pages.innerHTML = "<b>共"+allpages+"页</b> "//输出页面数量

    for (var i=1i<=allpagesi++){

        //这里对初始分页做了判断,如果是第一次循环,则将第一页高亮,因为是JS分页程序也决定了网页开启后为第一页:

     pages.innerHTML += "<a href=\"javascript:showPage('"+i+"')\" style=\"color:" + (i==1?"#F00":"#06C") + "\">第"+i+"页</a> "

//循环输出第几页

    }

}

function showPage(pageINdex)

{

    obj.scrollTop=(pageINdex-1)*parseInt(obj.offsetHeight)//根据高度,输出指定的页

    //下面我做了点击事件的判断,点击了哪个,哪个高亮,其余的变回原色:

var as = pages.getElementsByTagName('a')

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

 as[i].style.color = i+1 == pageINdex ? '#F00' : '#06C'

}

}

</script>

这是表格高亮显示功能。

hover一个模仿悬停事件。鼠标移动到一个对象上面及移出这个对象。的方法。这是一个自定义的方法,它为频繁使用的任务提供了一种保持在其中的状态。当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。而且,会伴随着对鼠标是否仍然处在特定元素中的检测,如果是,则会继续保持悬停状态,而不触发移出事件。

第一种各行换色,第二种鼠标移动到对应行,高亮显示。