js根据URL设置网站统一导航。
来源:互联网 发布:进销存的软件 编辑:程序博客网 时间:2024/06/06 13:05
有很多网站的导航都是统一的。不过,为了提高用户体验,当前页面对应导航链接要与其他要栏目有点区别,这样能很好让用户知道当前在哪个页面。
如下图:
为了做这个效果,以往我们都会为不同的页面做对应导航。现在我们通过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根据URL设置网站统一导航。
- 统一设置导航栏
- JS根据URL转向
- 统一设置导航条文字颜色
- swift统一设置导航条按钮属性
- iOS统一设置导航栏图片
- node.js导航网站
- asp.net 设置网站统一标题
- 网站导航栏目焦点设置
- 根据URL读取远程网站的html
- iOS开发 -- 给导航栏设置统一风格(appearance)
- yii2设置网站基础url
- js根据url得到参数值
- JS根据身份证号码 设置性别
- js 设置url参数值
- 开启sharepoint网站设置的导航选项
- 网站导航菜单代码精简设置
- 统一导航路由方案
- 浅析μC/GUI-v3.90a之GUI_DispString函数
- cocos2dx之创建Button
- c++学习连载-堆排序学习及遇到问题
- ftw遍历目录树
- [ jQuery] jquery动态改变onclick属性失效的问题!
- js根据URL设置网站统一导航。
- C# 数字格式化 自动补0
- PL/SQL删除锁表的进程
- Linux下*.tar.gz文件解压缩命令
- MERGE新特性(UPDATE WHERE,DELETE WHERE,INSERT WHERE)
- perl函数
- 七、android-kernel gadget框架
- 技术团队工作外娱乐放松活动方案收集
- c语言 杨辉三角