今天在上班的时候碰到了要根据不同的页面随机添加栏目的问题，很简单的问题，想到了判断页面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); }); } });
怎么样是不是非常简单，这样的根据页面来随机添加分栏，在后期的维护和分栏内容更替都是相当方便的，我们只需要修改分栏内容页面就好。