js分页高亮问题

JavaScript010

js分页高亮问题,第1张

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

导航高亮显示当前页:

一、先定义一个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>

这个高亮,实质上是把12变成<span style="backgroud: yellow">12</span>。

那么只要做一个替换就可以了。但是需要考虑两点:

需要被替换的内容,必须是标签里的内容,不能是属性。比如,不能把<div width="100%" color="#12fe45">这里的100,12,45都不应该被替换。

需要被替换的内容,不能是<script>标签里的内容(理所当然的吧)。比如<script>var a=123xxx</script>这里的123不应该被替换。

所以,考虑到以上,最终的做法必须是遍历所有的标签,然后如果标签里没有标签的时候,才把标签里的文字作替换。

(function hilightNumber(jqObj) {

    // 不能替换script标签里的数字

    var domObj = jqObj[0]

    if (domObj.nodeName == "SCRIPT") {

        return

    }

    // 如果标签里有标签,我们也不作替换,而是递归进去遍历内层的标签。

    var children = jqObj.children()

    if (children.length > 0) {

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

            hilightNumber($(children[i]))

        }

    } else {

    // 标签里只有文字,没有内层标签的时候,才做替换,

    // 把123替换成带颜色的标签内包含123,就实现了高亮。

        var hilightedHtml = jqObj.html().replace(/([+\-]?[0-9]+(\.[0-9]+)?)/g, "<span style='background:yellow'>$1</span>")

        jqObj.html(hilightedHtml)

    }

})($("body"))

注意!这个不能解决全部的问题,但大部分情况应该可以用了。

不能解决的例子:

<p>我是诡异的段落2333,但是我里面竟然还有子标签!<b>这里是加黑的字666</b>。<span>这里是其它颜色12345的哈哈</span></p>

如果是上面这样的HTML,2333可能不会被加亮。。。毕竟p里还有内层标签b和span。。。