今天在上班的时候碰到了要根据不同的页面随机添加栏目的问题，很简单的问题，想到了判断页面url是否含有某字符串来进行随机添加栏目、。。这就需要了解location对象。

location 属性名 属性说明
hash 设置或返回从井号 (#) 开始的 URL
host 设置或返回主机名和当前 URL 的端口号。
hostname 设置或返回当前 URL 的主机名。
href 设置或返回完整的 URL。
pathname 设置或返回当前 URL 的路径部分。
port 设置或返回当前 URL 的端口号。
protocol 设置或返回当前 URL 的协议。
search 设置或返回从问号 (?) 开始的 URL（查询部分）。

以上就是location函数相关，这些在一些方面还是相当不错的选择。具体事例，看下边的demo。

首先我们设置首页，首页中有很多栏目链接，为了方便这里首页用index1命名，简化代码。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>首页1</title>

    </head>

    <body>

        <a href="index2.html">index2</a>

        <a href="index3.html">index3</a>

    </body>

</html>

其次我们设置index2栏目的页面，在其页面中，我们要引入jquer文件，和我们自己写的js文件。更重要的是因为是随机添加进去的分栏（小模块），所以，我们要给出我们的分栏容器~

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>index2</title>

    </head>

    <script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>

    <script src="js.js" type="text/javascript" charset="utf-8"></script>

    <body>

        <div class="index2">

        </div>

    </body>

</html>

同理，我们设置index3的页面。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>index3</title>

    </head>

    <script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>

    <script src="js.js" type="text/javascript" charset="utf-8"></script>

    <body>

        <div class="index3">

        </div>

    </body>

</html>

这样首页，和首页要连接的页面就设置完毕，接下来我们需要设置的是链接到的index2，和index3页面上的随机分栏的内容页.例如链接到index2的分栏是,我们起名为getweb

<div class="div1">

    <ul>

        <li>123</li>

        <li>345</li>

        <li>456</li>

        <li>576</li>

    </ul>

</div>

<div class="div2">

    <ul>

        <li>123</li>

        <li>345</li>

        <li>456</li>

        <li>576</li>

    </ul>

</div>

<div class="div3">

    <ul>

        <li>123</li>

        <li>345</li>

        <li>456</li>

        <li>576</li>

    </ul>

</div>

<div class="div4">

    <ul>

        <li>123</li>

        <li>345</li>

        <li>456</li>

        <li>576</li>

    </ul>

</div>

<div class="div5">

    <ul>

        <li>123</li>

        <li>345</li>

        <li>456</li>

        <li>576</li>

    </ul>

</div>

同理链接到index3的分栏内容为getweb2

<div class="div1">

    <ul>

        <li>123</li>

        <li>345</li>

        <li>456</li>

        <li>576</li>

    </ul>

</div>

<div class="div2">

    <ul>

        <li>额版本</li>

        <li>额版本</li>

        <li>额版本</li>

        <li>额版本</li>

    </ul>

</div>

分栏的内容页做好后，剩下的就是我们的js代码了；

//根据url的信息来判断需要显示的内容。

        $(function(){

            var url=window.location.href;//获取完整的URL

            if(url.indexOf("index2")>=0){//判断URL中是否含有某字符串(判断是哪一个页面)

                $.get("getweb.html",function(data){

                    $(".index2").html(data);

                });

            }else if(url.indexOf("index3")>=0){

                $.get("getweb2.html",function(data){

                    $(".index3").html(data);

                });

            }

        });

怎么样是不是非常简单，这样的根据页面来随机添加分栏，在后期的维护和分栏内容更替都是相当方便的，我们只需要修改分栏内容页面就好。

浅谈------location的更多相关文章

  1. 浅谈location对象

    简介 Location 对象存储在 Window 对象的 Location 属性中,表示那个窗口中当前显示的文档的 Web 地址.通过Location对象,可以获取URL中的各项信息,调用对象方法也可 ...

  2. 浅谈Hybrid技术的设计与实现第三弹——落地篇

    前言 接上文:(阅读本文前,建议阅读前两篇文章先) 浅谈Hybrid技术的设计与实现 浅谈Hybrid技术的设计与实现第二弹 根据之前的介绍,大家对前端与Native的交互应该有一些简单的认识了,很多 ...

  3. 浅谈Hybrid技术的设计与实现第二弹

    前言 浅谈Hybrid技术的设计与实现 浅谈Hybrid技术的设计与实现第二弹 浅谈Hybrid技术的设计与实现第三弹——落地篇 接上文:浅谈Hybrid技术的设计与实现(阅读本文前,建议阅读这个先) ...

  4. 浅谈Hybrid技术的设计与实现

    前言 浅谈Hybrid技术的设计与实现 浅谈Hybrid技术的设计与实现第二弹 浅谈Hybrid技术的设计与实现第三弹——落地篇 随着移动浪潮的兴起,各种APP层出不穷,极速的业务扩展提升了团队对开发 ...

  5. 浅谈HTML5单页面架构（二）——backbone + requirejs + zepto + underscore

    本文转载自:http://www.cnblogs.com/kenkofox/p/4648472.html 上一篇<浅谈HTML5单页面架构(一)--requirejs + angular + a ...

  6. 浅谈Linux中的信号处理机制（二）

    首先谢谢 @小尧弟 这位朋友对我昨天夜里写的一篇<浅谈Linux中的信号处理机制(一)>的指正,之前的题目我用的“浅析”一词,给人一种要剖析内核的感觉.本人自知功力不够,尚且不能对着Lin ...

  7. 浅谈用ModelSim+Synplify+Quartus来实现Altera FPGA的仿真

    浅谈用ModelSim+Synplify+Quartus来实现Altera FPGA的仿真 工作内容: Mentor公司的ModelSim是业界最优秀的HDL语言仿真软件,它能提供友好的仿真环境,是业 ...

  8. 浅谈OCR之Onenote 2010

    原文:浅谈OCR之Onenote 2010 上一次我们讨论了Tesseract OCR引擎的用法,作为一款老牌的OCR引擎,目前已经开源,最新版本3.0中更是加入了中文OCR功能,再加上Google的 ...

  9. 浅谈 URI 及其转义

    URI URI,全称是 Uniform Resource Identifiers,即统一资源标识符,用于在互联网上标识一个资源,比如 https://www.upyun.com/products/cd ...

随机推荐

  1. css清除浮动的8种方法以及优缺点

    浮动会使当前标签产生上浮的效果,同时会影响到前后的标签.父级标签的位置及width height 属性.而且同样的代码,在各种浏览器中效果可能不同,这样让清除浮动更难了.清除浮动引起的问题有很多的方法 ...

  2. 题解 P3386 【【模板】二分图匹配】

    题目链接 首先呢声明一下,本宝宝发这篇题解只是为了(goto a;) 个人还是比较喜欢跑dinic暴力跑最大流...竟然比匈牙利还快..如果说不懂网络流的~~蒟蒻~~大佬们.可以看看这个(反正我就是在 ...

  3. luoguP2982 [USACO10FEB]慢下来Slowing down

    https://www.luogu.org/problemnew/show/P2982 这题你写个树剖当然可以做,但是我们还有一种更简单的方法,使用 dfs 序 + 树状数组即可 考虑一只牛到了自己的 ...

  4. 流水的算法，铁打的损失函数/MLE

    机器学习算法可以说是不少的,如果死记硬背的话,只能当时记得推导过程和步骤,过一段时间就又想不起来了,只能依稀记得一些影子.所以,应该找到算法的一些通用的方法来理解算法的思路以及推导过程. 我认为,最大 ...

  5. GitHub CEO：GitHub 十年，感谢有你

    简评:不知为何,总感觉 GitHub 成立不止 10 年了,你们有这种错觉么? 本文是 GitHub 联合创始人兼 CEO:Chris Wanstrath 在计算机世界杂志写的文章. 当我们回顾 Gi ...

  6. Python3入门之软件安装

    获得更多资料欢迎进入我的网站或者 csdn或者博客园 最近将我的Python笔记整理下,希望能对他人有所帮助,这是第一课,安装入门篇: windows下安装Python 1.下载,从这里下载:[下载链 ...

  7. 品味ZooKeeper之Watcher机制_2

    品味ZooKeeper之Watcher机制 本文思维导图如下: 前言 Watcher机制是zookeeper最重要三大特性数据节点Znode+Watcher机制+ACL权限控制中的其中一个,它是zk很 ...

  8. python 3中 的subprocess

    commands好像python3.6被去除了,它现在被subprocess替代了 FUNCTIONS getoutput(cmd) Return output (stdout or stderr) ...

  9. Optimizing and caching browser bundles...

    扎心了,老铁!!! 他妈的,弄了几天都是卡在这里!!上网查了一下.说是我的内存不够,好吧.我慢慢等,然而让我等了好几天都没什么反应..两天了,一直卡在这里.今天在虚拟机也是发狠了. 我直接把虚拟机的内 ...

  10. IntersectionObserver

    创建对象 var io = new IntersectionObserver(callback, option); IntersectionObserver是浏览器原生提供的构造函数,接受两个参数:c ...