js根据URL设置网站统一导航。
2013-12-04 11:22
204 查看
有很多网站的导航都是统一的。不过,为了提高用户体验,当前页面对应导航链接要与其他要栏目有点区别,这样能很好让用户知道当前在哪个页面。
如下图:
![](http://img.blog.csdn.net/20131204111619656?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvanVuanVuMjIyMjIy/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
为了做这个效果,以往我们都会为不同的页面做对应导航。现在我们通过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;
}
}
如下图:
为了做这个效果,以往我们都会为不同的页面做对应导航。现在我们通过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;
}
}
相关文章推荐
- js在不同页面的导航背景不同 (设置网站公共头的导航)
- jquery 根据网站url给导航nav添加active效果
- 公用导航栏的根据url控制选中导航js
- js中设置带中文参数的URL 解决办法
- JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)
- url参数的设置、获取、删除(js stringobject replace方法的使用)
- 网站导航栏目焦点设置
- js代码实现根据实际物理地址,进行 URL 跳转,并实现用户自定义 URL 跳转
- 开启sharepoint网站设置的导航选项
- jQuery实现的网站统一风格导航(或标题栏)
- 根据数据库中的值用js设置RadioButtonList选中与否
- js根据url查询字符串里的键名获取其值
- JS+CSS实现六级网站导航主菜单效果
- 根据数据库中的值用js设置RadioButtonList选中与否
- js根据参数名获取url上的参数值
- 根据用户选择用JS切换生效的CSS文件实现网站网页换肤
- 纯JS设置首页,加入收藏,获取URL参数,解决中文乱码
- 解决WordPress设置错误的url网站不能访问的问题
- 【JAVA】JAVA程序根据url请求网站HTML页面