js根据URL设置网站统一导航。

有很多网站的导航都是统一的。不过,为了提高用户体验,当前页面对应导航链接要与其他要栏目有点区别,这样能很好让用户知道当前在哪个页面。

如下图:

为了做这个效果,以往我们都会为不同的页面做对应导航。现在我们通过JS可以实现这个效果。


$(function(){

    setcur();

});



function setcur()
{
url=document.URL;
a=url.split("/");
str=a[(a.length-1)];
    if (str.indexOf("index")>-1)
    {

        $('.menu-m ul li').each(function()
            {
             $(this).removeAttr('id');
             }
        );

        $(".menu-m ul li:eq(0)").attr("id","menu-now");
        return;
    }
    if (str.indexOf("about")>-1)
    {

        $('.menu-m ul li').each(function()
            {
             $(this).removeAttr('id');
             }
        );

        $(".menu-m ul li:eq(1)").attr("id","menu-now");
        return;
    }
    
    
    
    if (str.indexOf("product")>-1)
    {

        $('.menu-m ul li').each(function()
            {
             $(this).removeAttr('id');
             }
        );

        $(".menu-m ul li:eq(2)").attr("id","menu-now");
        return;
    }
    
        if (str.indexOf("pinpai")>-1)
    {

        $('.menu-m ul li').each(function()
            {
             $(this).removeAttr('id');
             }
        );

        $(".menu-m ul li:eq(2)").attr("id","menu-now");
        return;
    }

    
    
    
    if (str.indexOf("news")>-1)
    {

        $('.menu-m ul li').each(function()
            {
             $(this).removeAttr('id');
             }
        );

        $(".menu-m ul li:eq(3)").attr("id","menu-now");
        return;
    }
    

    
    
    
     // alert(str.indexOf("33"));
    if (str.indexOf("baike")>-1)
    {

        $('.menu-m ul li').each(function()
            {
             $(this).removeAttr('id');
             }
        );

        $(".menu-m ul li:eq(4)").attr("id","menu-now");
        return;
    }
    if (str.indexOf("zhaopin")>-1)
    {

        $('.menu-m ul li').each(function()
            {
             $(this).removeAttr('id');
             }
        );

        $(".menu-m ul li:eq(5)").attr("id","menu-now");
        return;
    }
    
    
    
    else
    {

        $('.menu-m ul li').each(function()
            {
             $(this).removeAttr('id');
             }
        );

        $(".menu-m ul li:eq(0)").attr("id","menu-now");
        return;
    }
    
    
    
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值