window location search 应用之页面传参前端

本篇博客的主角是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= “(?后面的内容可以随意写，格式就是属性 = 属性值，这是传值的先决条件)

Tab1 Tab2 Tab3 Tab4 Tab5

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

tab1 tab2 tab3 tab4 tab5 11111 22222 33333 44444 55555

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

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

内容就这么多。