Question

我在一个页面中有两个div（div A和div B），默认情况下Div A设置为显示块，Div B设置为display none。要让用户登陆此特定页面，他必须单击对话框中的链接。像这样：

<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。

Answer 1

使用此

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

Answer 2

我会在<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();
                }
            }
        }
    };
}());

查看?之后的网址，将其按"&"拆分（并对其进行循环），然后按"="。如果密钥为"link"，则会继续查看displayMap以查看此网址中URL的值转换为...并显示/隐藏相应的内容。

我确信有更优雅的方法可以解决这个问题，但我只是想解释一下这个方法。

Answer 3

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

首个链接网址为"page1.html?clickedLink=page1Link1"，第二个链接网址为“page1.html?clickedLink=page1Link2"。

现在，您可以在目标网页上查看QueryString，以验证这两个链接中的哪一个带您进入此页面。

Answer 4

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

Answer 5

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

我希望这会对你有所帮助。

确定上一页上点击的内容

5 个答案: