+ -
当前位置:首页 → 问答吧 → 请教 jquery 实现高亮当前导航

请教 jquery 实现高亮当前导航

时间:2010-01-07

来源:互联网

点击导航的某个标签a连接到b页面,b页面的导航标签a就会高亮,这种效果改怎么实现。在网络上找了好久,都没找到,刚学jquery,自己还不会写 ,在这里请高手指点下。( 这种效果常见于 商城网站)

作者: grchao   发布时间: 2010-01-07

两种方式实现:
1. 静态的,直接把b页面的a标签高亮
2. 动态的,从后台取得标志页面的信息,高亮相应的标签。

作者: jorneyr   发布时间: 2010-01-07

$(function shownav(){
    var a1 = document.URL;
    var a2 = $(".nav ul li");
    for(var i=0;i<a2.length;i++){
        if(a2 == a1){
            $(a2).addClass("select");
            return;
        }
    }
    $(a2[0]).addClass("select");
})

作者: raceman   发布时间: 2010-01-08

感谢2楼的代码。
我刚才测试了下,不能达到效果。不知道为什么。

<script>
$(function shownav(){
    var a1 = document.URL;
    var a2 = $(".nav ul li");
    for(var i=0;i<a2.length;i++){
        if(a2 == a1){
            $(a2).addClass("select");
            return;
        }
    }
    $(a2[0]).addClass("select");
})
</script>
<div class="nav">
    <ul>
        <li><a href="index.asp">首 页</a></li>
        <li><a href="sj.asp">手机卖场</a></li>
        <li><a href="sm.asp">数码天下</a></li>
        <li><a href="#">时尚女人</a></li>
        <li><a href="#">家居装饰</a></li>
    </ul>
</div>

上面代码,我放在一个公共文件top.asp内。在index  sj.asp  sm.asp上调用top.asp文件。测试的时候不能实现效果,高手路过指点下。

作者: grchao   发布时间: 2010-01-08

$(function(){
    $(".nav ul li").click(function(){
        $(".nav ul li").css("background-color","white");
        $(this).css("background-color","red");
        var hre=$(this).children().text();
        if(hre=="数码天下")
        {
        $(".con").load("WebForm.aspx");
        }
    });
    
})
</script>
<div class="nav">
    <ul>
        <li><a href="index.aspx" title="1">首 页</a></li>
        <li><a href="#" title="2">手机卖场</a></li>
        <li><a href="#">数码天下</a></li>
        <li><a href="#">时尚女人</a></li>
        <li><a href="#">家居装饰</a></li>
    </ul>
</div>

作者: jxxjyb   发布时间: 2010-01-11

相关阅读 更多