您的位置:首页 > 运维架构 > 网站架构

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

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

如下图:



为了做这个效果,以往我们都会为不同的页面做对应导航。现在我们通过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;

}

}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: