浅谈------location

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

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

posted @ 2016-05-23 08:07  xiuber  阅读(315)  评论(0编辑  收藏  举报