确定在上一页上单击了什么

Determine what was clicked on previous page

本文关键字：什么 单击 一页      更新时间：2023-09-26

i在一个页面中有两个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。

我会在<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中的值在该页面上的翻译结果。。。并且适当地显示/隐藏。

我相信有一种更优雅的方法来处理这个问题，但我只是想解释一下这种方法。

使用此

<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
}
?>

如果您想从上一页获取详细信息，可以使用QueryString。

第一个链接url将是"page1.html?clickedLink=page1Link1"，第二个链接url为"page1.html?clickedLink=page1Link2".

现在，在您的目的地页面上，您可以检查QueryString，以验证两个链接中的哪一个将您带到此页面。

您可以在第二个页面的链接中包含一个请求参数。在第二个页面上，您将使用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");
}

如果你不想使用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

我希望这对你有帮助。

相关文章：