页面间传值(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)都支持该属性。


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

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

List列表

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

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')
           } 
       }                    
})

 

内容就这么多。

发表评论

电子邮件地址不会被公开。 必填项已用*标注