window location search 应用 之 页面传参

本篇博客的主角是window.location.search

何为window.location.search？

window.location.search
Window对象的location属性引用的是Location对象，它表示该窗口中当前显示的文档的URL。Location对象包含以下属性： protocol, host, hostname, port, pathname和search。

---

search: 返回的是问号之后的URL，这部分通常是某种类型的查询字符串。一般来说，这部分内容是用来参数化URL并在其中嵌入参数的。主流浏览器（IE、FireFox、Chrome、Safair、Opera）都支持该属性。

---

下面说一下它的一种应用场景。做前端页面，大家应该都会遇到过这种情况：

一般网页上都会有导航（比如电商、新闻等等），每个导航里包含一些不同类型的标签，提供跳转功能。

如上所示，我们点击第一个页面的Tab3,会直接跳转到第二个页面的tab3选项卡，来展示该选项卡里的内容。如何实现我们点击第一个页面里导航的某一行，就会跳转到第二个页面里的tab相对应的选项卡呢？今天的主角就可以做到。下面说说大体思路，然后附代码。

• 1.首先，在第一页（index.html）写一个ul,每个li里包含一个a标签，路径里记得在URL地址后（qwer.html为第二页）加上”？”和”type= “(?后面的内容可以随意写，格式就是 属性 = 属性值 ，这是传值的先决条件)

<ul>  
    <li><a href="qwer.html?type=tab1">Tab1</a></li>   
    <li><a href="qwer.html?type=tab2">Tab2</a></li>
    <li><a href="qwer.html?type=tab3">Tab3</a></li>
    <li><a href="qwer.html?type=tab4">Tab4</a></li>
    <li><a href="qwer.html?type=tab5">Tab5</a></li>  
</ul>  

• 2.第二页，与第一页对应，先要有同等数量的tab选项卡。里面ul（即Tab选项卡）的li的class属性按照第一页的URL?后”type= “的值按序填写。

<div id="tab">
    <ul>
        <li id="tab1" class="tab1 checked">tab1</li>
        <li id="tab2" class="tab2">tab2</li>
        <li id="tab3" class="tab3">tab3</li>
        <li id="tab4" class="tab4">tab4</li>
        <li id="tab5" class="tab5">tab5</li>
    </ul>
    <ol>
        <li class="show">11111</li>
        <li>22222</li>
        <li>33333</li>
        <li>44444</li>
        <li>55555</li>
    </ol>
</div>

附上简单样式，方便查看。

ul, ol {
    list-style: none;
    margin: 0;
    padding: 0;
}
ul {
    width: 500px;
    height: 26px;
}
ul li {
    float: left;
    height: 26px;
    padding: 0 16px;
    cursor: pointer;
}
ol {
    width: 488px;
    height: 100px;
    padding: 6px;
    background: #abcdef;
}
ol li {
    height: 100%;
    display: none;
}
ol li:nth-child(1) {
    background: yellow;
}
ol li:nth-child(2) {
    background: blue;
}
ol li:nth-child(3) {
    background: red;
}
ol li:nth-child(4) {
    background: #ccc;
}
ol li:nth-child(5) {
    background: #666;
}
.show {
    display: block;
}
ul li {
    color: black;
    background: #ddd;
    border: 1px solid #ccc;
    border-bottom: 0;
}
.checked {
    color: #fff;
    background: pink;
    border: 1px solid #333;
    border-bottom: 0;
}

• 3.接下来就是写业务逻辑了（栗子里用了jQuery）。

首先，我们获取到地址栏的地址，转换成字符串，格式如下：

?type=tab3

而我们需要的是？后面的type值，所以需要“=”分割字符串，拿到“tab3”。之前我们把li的class名按照tab1、tab2、tab3……顺序填写，现在用数组把他们保存起来。然后我们用for循环来查找type值与数组中的值相匹配的，便实现了我们想要的效果。

$(function() {
    var $uli = $("ul li");
    var $oli = $("ol li");

    //Tab切换------
    $uli.click(function() {
        var index = $(this).index();
        $(this).addClass("checked").siblings().removeClass('checked');
        $oli.eq(index).addClass("show").siblings().removeClass('show');
    })

    //页面间传值------

    var url = window.location.search;  //获取地址栏中的地址  

    url = url.toString();  //转换成字符串

    var array = new Array();  //存放分割后的字符串 

    array = url.split("=");  //根据“=”符号将查询字符串分割开   

    var titles = ['tab1', 'tab2', 'tab3','tab4','tab5'];  //存放第二页tab选项卡的class名

    //循环匹配，type属性一致则进行相关操作。
    for (var i = 0; i < titles.length; i++) {
           if (array[1] == titles[i]) {  
            $('.' + titles[i]).addClass('checked').siblings().removeClass('checked')
            $oli.eq(i).addClass('show').siblings().removeClass('show')
           } 
       }                    
})

内容就这么多。