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

    :BeanFactory基本的工厂解析,管理,实例化所有容器内的bean的接口,spring中所有解析配置文件的类都直接或者间接实现该接口ApplicationContext接口implements ...

  2. linux下蓝牙开发(bluez应用)

    编译blueZ-5.25 需要先编译安装以下包: bluez-libs-3.36.tar.gz expat-2.1.0.tar.gz dbus-1.10.0.tar.gz glib-2.26.1.ta ...

  3. shell-003：用for循环统计内存使用量

    shell-100主要是用于练习! #!/bin/bash # 统计内存的使用量(这里用ps统计) # 第一步:不打印第一行,这里的sed ‘1d’ 去掉 for n in `ps aux |sed ...

  4. visual studio 使用Resharper进行测试

    安装Resharper 添加nunit.framework 测试代码 [TestFixture] public class AddresLabelPrintImplTest { [Test] publ ...

  5. 【算法笔记】B1004 成绩排名

    1004 成绩排名 (20 分) 读入 n(>0)名学生的姓名.学号.成绩,分别输出成绩最高和成绩最低学生的姓名和学号. 输入格式: 每个测试输入包含 1 个测试用例,格式为 第 1 行:正整数 ...

  6. 【数学】【筛素数】Miller-Rabin素性测试 学习笔记

        Miller-Rabin是一种高效的随机算法,用来检测一个数$p$是否是素数,最坏时间复杂度为$\log^3 p$,正确率约为$1-4^{-k}$,$k$是检验次数. 一.来源     Mil ...

  7. hdu1686 Oulipo kmp

    题目传送门 思路:kmp模板,稍微修改下 #include<bits/stdc++.h> #define clr(a,b) memset(a,b,sizeof(a)) using name ...

  8. 解决分批次调用 jsonp 接口的 callback 会报错问题

    当我们分批次调用同一个jsonp接口时,会有一定机率同时调用,而jsonp的callback不支持同时调用, 会报错,所以当我们在分批次调用同一jsonp接口时,最好在callback后加个变量值,总 ...

  9. window7下karma 报 The header content contains invalid characters BUG

    打开你的依赖node_modules\karma\node_modules\connect\lib\patch.js 将里面的setHeader方法改成下面这样,干掉序列化日期时出现的中文 res.s ...

  10. ZOJ - 3624

    当A连向C,B连向D时存在相交路径 #include<bits/stdc++.h> #define rep(i,j,k) for(int i=j;i<=k;i++) #define ...