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

    /*Sorting from little to large use List*/ #include <stdio.h> /* printf, scanf, NULL */ #includ ...

  2. (转)使用vs调试的时候，如何知道程序阻塞在哪里？

    遇到一个问题,加了两个断点当运行到断点A后,我释放掉了,理想状态应该是在断点B停住,但并没有,程序感觉就像是阻塞了一样请问,这种状况如何知道程序当前是在哪里阻塞着? 回复: 可以让调试器停住,然后在调 ...

  3. ASPxGridView后台实现隐藏新增按钮

    (ASPxGridView2.Columns[0] as GridViewCommandColumn).NewButton.Visible = false;//0应该代表的是NewButton所在的列 ...

  4. 题解 P1434 【滑雪】

    题目链接 此题运用功能强大的 ~~暴力搜索~~ 记忆化搜索才是重点!!! 然而,这是一道经典的DP问题 如果我们用$dis[i][j]$来表示坐标为$(i,j)$时的高度 $cnt[i][j]$ 是我 ...

  5. 洛谷P3122 [USACO15FEB]圈住牛Fencing the Herd（计算几何+CDQ分治）

    题面 传送门 题解 题目转化一下就是所有点都在直线\(Ax+By-C=0\)的同一侧,也就可以看做所有点代入\(Ax+By-C\)之后的值符号相同,我们只要维护每一个点代入直线之后的最大值和最小值,看 ...

  6. Cygwin apt-cyg ”MD5 sum did not match”

    直接编辑apt-cyg 文件,找到md5sum,替换修改成sha512sum. # check the md5 digest=`cat "desc" | awk '/^instal ...

  7. 题解 P1632 点的移动

    P1632 点的移动 题目描述 平面上有N个整数坐标点.如果将点(x0,y0)移动到(x1,y1),则需要的代价为|x0-x1|+|y0-y1|.求使得K(K=1,-,N)个点在同一位置上最少需要的代 ...

  8. 5、用Numpy实现结构体

    1.结构数组: 在C语言中我们可以通过struct关键字定义结构类型,结构中的字段占据连续的内存空间,每个结构体占用的内存大小都相同,因此可以很容易地定义结构数组.和C语言一样,在NumPy中也很容易 ...

  9. Qt 学习之路 2（72）：线程和事件循环

    Qt 学习之路 2(72):线程和事件循环 <理解不清晰,不透彻>  --  有需求的话还需要进行专题学习  豆子  2013年11月24日  Qt 学习之路 2  34条评论 前面一章我 ...

  10. Android HttpURLConnection的使用+Handler的原理及典型应用

    1.介绍 总结:HttpURLConnection用来发送和接收数据. 2.ANR异常报错 (1)ANR(Application not response) 应用无响应, 主线程(UI线程) (2)如 ...