jquery 确定上一页上点击了什么

a1o7rhls  于 2023-10-17  发布在  jQuery
关注(0)|答案(5)|浏览(114)

我在一个页面中有两个div(div A和div B),默认情况下,Div A设置为显示块,Div B设置为不显示。用户要登陆到这个特定的页面,他必须点击对话框中的链接。就像这样:

<div id"dialog-box">

  <a href="/newpage.html" class="firstlink"> First Link </a>

  <a href="/newpage.html" class="secondlink"> Second Link </a>

</div>

<div class="newpage">

   <div class="divA" style="display:block">

   </div>

   <div class="divB" style="display:none">

   </div>

</div>

我想达到的是这样的:

$(".firstlink").click(function(){
   $(".divA").css("display","none");
   $(".divB").css("display","block");
});

$(".secondlink").click(function(){
   $(".divA").css("display","block");
   $(".divB").css("display","none");
});

但是上面的当然不起作用,因为divA和divB在不同的页面上。我不想使用cookie来完成这个小任务。

ntjbwcob

ntjbwcob1#

我会在<a> href属性的查询字符串中传递所需的数据。因此,我将HTML更改为:

<a href="/newpage.html?link=firstlink" class="firstlink"> First Link </a>

<a href="/newpage.html?link=secondlink" class="secondlink"> Second Link </a>

然后,在你的newpage.html中,我会有这样的代码:

(function () {
    "use strict";

    /* Parse querystring */
    var displayMap = {
            firstlink: ".divA",
            secondlink: ".divB"
        },
        qs, pairs, split, i, pair,
        queryString = {};

    qs = location.search;
    if (qs) {
        pairs = qs.split("&");
        for (i = 0; i < pairs.length; i++) {
            pair = pairs[i];
            split = pair.split("=");
            queryString[decodeURIComponent(split[0])] = decodeURIComponent(split[1]);
        }
    }
    /* End Parse querystring */

    window.onload = function () {
        var linkPassed, link;
        linkPassed = queryString["link"];
        if (linkPassed) {
            for (link in displayMap) {
                if (link === linkPassed) {
                    $(displayMap[link]).hide();
                } else {
                    $(displayMap[link]).show();
                }
            }
        }
    };
}());

它查看?之后的URL,然后按"&"拆分(并循环遍历这些对),然后按"="拆分。如果键是"link",则它将继续查看displayMap,以查看URL中的值在此页面上的转换.并适当地显示/隐藏。
我相信有一个更优雅的方法来处理这个问题,但我只是想解释一下这个方法。

e3bfsja2

e3bfsja22#

使用此

<a href="/newpage.html?b=firstlink" class="firstlink"> First Link </a>

  <a href="/newpage.html?b=secondlink" class="secondlink"> Second Link </a>

然后再把它换一页

<?php $link=$_REQUEST['b']; ?>

和使用本

<?php if($link=='firstlink'){ ?>
$(".firstlink").click(function(){
   $(".divA").css("display","none");
   $(".divB").css("display","block");
});
<?php
}
if($link=='secondlink'){
?>
$(".secondlink").click(function(){
   $(".divA").css("display","block");
   $(".divB").css("display","none");
});
<?php
}
?>
wi3ka0sx

wi3ka0sx3#

如果您想从上一页获取详细信息,可以QueryString
第一个链接URL是"page1.html?clickedLink=page1Link1",第二个链接URL是page1.html?clickedLink=page1Link2"
现在,在您的目标页面上,您可以检查QueryString以验证两个链接中的哪一个将您带到此页面。

50pmv0ei

50pmv0ei4#

您可以在指向第二个页面的链接中包含请求参数。在第二个页面上,您将使用JavaScript获取参数的值,该值将对应于单击的链接。
把你的链接改成这样。

<a href="/newpage.html?link=1" class="firstlink"> First Link </a>
<a href="/newpage.html?link=2" class="secondlink"> Second Link </a>

在第二个页面上,使用这样的函数获取URL参数。http://jquerybyexample.blogspot.com/2012/06/get-url-parameters-using-jquery.html

function GetURLParameter(sParam)
{
    var sPageURL = window.location.search.substring(1);
    var sURLVariables = sPageURL.split('&');
    for (var i = 0; i < sURLVariables.length; i++) 
    {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam) 
        {
            return sParameterName[1];
        }
    }
}​

使用上述函数

if (GetURLParameter('link') === '1') {
   $(".divA").css("display","none");
   $(".divB").css("display","block");
} else {
   $(".divA").css("display","block");
   $(".divB").css("display","none");
}
pbossiut

pbossiut5#

如果你不想使用cookie,那么你必须通过url参数传递值。
下面的函数可以帮助你获取参数:

function getParameter(param) {
                var val = document.URL;
                var url = val.substr(val.indexOf(param))  
                var n=parseInt(url.replace(param+"=",""));
                alert(n+1); 
}
getParameter("page");

http://www.example.com/newpage.html?page=firstlink

相关问题