今天在上班的时候碰到了要根据不同的页面随机添加栏目的问题，很简单的问题，想到了判断页面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. Mac 安装 mysqlclient

    尝试在虚拟环境下通过 pip 安装: pip install mysqlclient 然后报错:OSError: mysql_config not found 找到官方文档 https://githu ...

  2. loj #2116. 「HNOI2015」开店

    #2116. 「HNOI2015」开店 题目描述 风见幽香有一个好朋友叫八云紫,她们经常一起看星星看月亮从诗词歌赋谈到人生哲学.最近她们灵机一动,打算在幻想乡开一家小店来做生意赚点钱.这样的想法当然非 ...

  3. Spring AOP（面向切面编程）

    一.AOP简介 1.AOP概念:Aspect Oriented Programming 面向切面编程 2.作用:本质上来说是一种简化代码的方式 继承机制 封装方法 动态代理 …… 3.情景举例 ①数学 ...

  4. CF886E Maximum Element

    $ \color{#0066ff}{ 题目描述 }$ 从前有一个叫Petya的神仙,嫌自己的序列求max太慢了,于是将序列求max的代码改成了下面这个样子: int fast_max(int n,in ...

  5. Dancing Links算法（舞蹈链）

    原文链接:跳跃的舞者,舞蹈链(Dancing Links)算法——求解精确覆盖问题 作者:万仓一黍 出处:http://grenet.cnblogs.com/ 本文版权归作者和博客园共有,欢迎转载,但 ...

  6. 一个很棒的PHP缓存类，收藏下

    <?php class Cache { /** 缓存目录 **/ var $CacheDir = './cache'; /** 缓存的文件 **/ var $CacheFile = ''; /* ...

  7. angluarJs与后台交互get

    <!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <met ...

  8. Python web前端 03 CSS属性

    Python web前端 03 CSS属性 一.文字.文本属性 1.文字属性 font-family #字体类型浏览器默认的字体是微软雅黑,字体中有多个字体的时候,如果前面的字体没有就使用后面的字体 ...

  9. UVA - 10298 后缀数组(仅观赏)

    题意:求最小循环节 \(KMP\)可以20ms通过,而\(da\)实现的后缀数组并无法在3000ms内通过 听说要用\(dc3\)才勉强卡过,这里仅列出\(da\)实现 #include<ios ...

  10. POJ - 3233 矩阵套矩阵

    题意:给你矩阵\(A\),求\(S=\sum_{i=1}^{k}A^i\) 构造矩阵 \[ \begin{bmatrix} A & E \\ 0 & E\\ \end{bmatrix} ...