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

    Spring Boot的每个模块包详解,具体如下: 1.spring-boot-starter 这是Spring Boot的核心启动器,包含了自动配置.日志和YAML. 2.spring-boot-s ...

  2. 洛谷P3357 最长k可重线段集问题（费用流）

    传送门 其实和最长k可重区间集问题差不多诶…… 把这条开线段给压成x轴上的一条线段,然后按上面说的那种方法做即可 然而有一个坑点是线段可以垂直于x轴,然后一压变成一个点,连上正权环,求最长路……然后s ...

  3. C# 精准计时之 QueryPerformanceCounter QueryPerformanceFrequency用法

    C# 用法: public static class QueryPerformanceMethd { [DllImport("kernel32.dll")] public exte ...

  4. [jvm] JVM体系结构

    一.jvm 运行时数据区域 程序计数器 java虚拟机栈 本地方法栈 java堆 方法区 运行时常量池 直接内存(非JVM区域) 二.深入探讨HotSpot虚拟机在Java堆中对象分配.布局和访问的全 ...

  5. MacOs桌面自动被打乱的原因

    1 系统设置--Mission Control -- 自动根据最近使用情况排序的勾勾去掉

  6. 针对animationend和transitionend多次执行的问题解决方案

    对于animationend事件来说的话,如果我们在外层添加这个事件监听,如果监听元素里面还有动画,则里面元素动画结束也会执行这个animationend事件.所以我们可以这样做: if(e.targ ...

  7. Android Studio 常用技巧

    1.在控制台输出语句方法 //在控制台输出语句 System.out.println("like"); //方式1 Log.d("002","lind ...

  8. tornado 05 模块继承

    tornado 05 模块继承 一.模板继承 #问题:在浏览网页的时候,很多页面上很多部分其实是重复的,那这些部分在每个页面都去写一次吗? #不是,这只不过是通过继承实现的 #模板继承 #在字模板中写 ...

  9. JAVA数据结构--选择排序

    选择排序(Selection sort)是一种简单直观的排序算法.它的工作原理如下.首先在未排序序列中找到最小(大)元素,存放到排序序列的起始位置,然后,再从剩余未排序元素中继续寻找最小(大)元素,然 ...

  10. C# 获取控制面板软件信息

    一般情况下要知道的注册表位置 Software\Microsoft\Windows\CurrentVersion\Uninstall 要知道的根目录集合 List<RegistryKey> ...