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

原创 2013年12月04日 11:22:44

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

如下图:

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

iOS 统一定制导航栏的 appearance 方法

iOS5及其以后提供了一个比较强大的工具UIAppearance,我们通过UIAppearance设置一些UI的全局效果,这样就可以很方便的实现UI的自定义效果又能最简单的实现统一界面风格,它提供如下...
  • feifeiwuxian
  • feifeiwuxian
  • 2015年07月28日 20:50
  • 559

统一设置导航栏

1.设置导航栏的属性 2.统一不要在根控制器上设置返回键 3.统一设置全屏滑动效果 首先我会考虑到手势影响了默认只能在边缘滑动,所以打印Nav中的手势,得到 ; target= target...
  • qq_25591667
  • qq_25591667
  • 2016年09月18日 13:32
  • 116

URL - 统一资源定位器

URL - 统一资源定位器 Web浏览器通过URL从Web服务器请求页面。 当您点击 HTML 页面中的某个链接时,对应的 标签指向万维网上的一个地址。 一个统一资源定位器(URL) 用于定位...
  • wuxiaobingandbob
  • wuxiaobingandbob
  • 2015年02月15日 10:57
  • 906

js 设置与修改url参数的实现代码

使用js设置url参数。 代码: // 获取地址栏的参数数组 function getUrlParams() { var search = window.location.sear...
  • jbxue123
  • jbxue123
  • 2013年07月08日 11:37
  • 2213

【JS 设计模式 】用组合模式来实现树形导航--JS代码结构思路分析(二)

根据上一节中的HTML代码结构我们通过JS来渲染HTML代码,我们先提供一下JS的代码片段,这代码代码不是一个完整的代码是经过简化的。通过JS代码来分析如何组装HTML的; 我们先来分析一下面上面的代...
  • itpinpai
  • itpinpai
  • 2016年04月24日 15:07
  • 7930

URL 统一资源定位符

全称:Uniform Resource Locator 译为:统一资源定位符 URL(Uniform Resoure Locator 统一资源定位器)是WWW网页的地址,好比一个街道在城市地图上地址...
  • lm727083839
  • lm727083839
  • 2014年10月24日 10:40
  • 901

用java开发一个搜索导航网站

最近用业余时间做了一个搜索导航网站.该网站由定向爬取蜘蛛,网页分析,正文提取,切词,内容生成等模块 构成.全部采用JAVA开发.        在网站开发过程中有不少体会,打算和各位分享 ...
  • u013982333
  • u013982333
  • 2014年03月22日 16:08
  • 542

ionic之app.js中的路由配置关系和导航居底部的解决方案

工作中遇到一个问题,用谷歌浏览器的手机端调试界面时,导航是位于底部的,用自己的手机调试时,导航却在顶部标题下面,并没有居于底部,在调页面的时候带了很多麻烦。路由之间的配置关系,详情待补充...... ...
  • badgirl_hong
  • badgirl_hong
  • 2016年11月10日 10:31
  • 975

针对js做设置也能影响网站seo结果

针对js做设置也能影响网站seo结果   js在数据传输,用户交互以及增进页面丰富度上起到了很大的作用,js的功用就是action。   不过js的主要功能却与搜索引擎索引页面以提...
  • seoyyedu
  • seoyyedu
  • 2017年11月29日 10:51
  • 100

大型网站的浏览器缓存设置

每次访问网页,通常浏览器会从服务器下载所 需的资源,例如 HTML 文档、图片、CSS、JavaScript,甚至包括字体文件等。这里面的许多文件(例如图片)都是很少变动的,如果每次都要从服务器重新下...
  • wangzhifuhaha
  • wangzhifuhaha
  • 2015年03月04日 15:17
  • 458
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js根据URL设置网站统一导航。
举报原因:
原因补充:

(最多只允许输入30个字)