Question

我以此代码为例：

<html>
<head>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script type="text/javascript">
function showonlyone(thechosenone) {
     $('.newboxes').each(function(index) {
          if ($(this).attr("id") == thechosenone) {
               $(this).show(200);
          }
          else {
               $(this).hide(600);
          }
     });
}
</script>

</head>

<body>

             <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
                <a id="myHeader1" href="javascript:showonlyone('newboxes1');" >show this one only</a>
             </div>
             <div class="newboxes" id="newboxes1" style="border: 1px solid black; background-color: #CCCCCC; display: block;padding: 5px; width: 150px;">Div #1</div>


             <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
                <a id="myHeader2" href="javascript:showonlyone('newboxes2');" >show this one only</a>
             </div>
             <div class="newboxes" id="newboxes2" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px; width: 150px;">Div #2</div>

             <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
                <a id="myHeader3" href="javascript:showonlyone('newboxes3');" >show this one only</a>
             </div>
             <div class="newboxes" id="newboxes3" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px; width: 150px;">Div #3</div>

</body>
</html>

在另一个页面上，当用户通过单击该外部链接加载页面时，我希望有一个显示 Div＃2 的链接。我认为通过某种类型的URL调整可以实现这样的事情吗？例如：domain.com/page.php？= showdiv2

感谢任何帮助，我对编码的了解有限（特别是使用PHP），所以如果您选择帮助，请详细说明。

Answer 1

有很多方法可以完成你想要做的事情。我将解释如何使用$_GET。

您可以使用$_GET变量控制此项（在网址末尾添加?varName=value，其中varName是变量的名称（这是任意的），以及{ {1}}是您要分配的值。

然后在您的PHP代码中，您可以通过 a）检查它是否存在以及 b）根据其值执行逻辑来访问此变量：

value

因此，例如，如果您希望显示<?php $divToShow = isset($_GET['div']) ? $_GET['div'] : ""; //logic here ?>，可以通过编写以下内容将其插入jQuery：

<div id="div_2">

或者你可以简单地强制PHP只打印div＃2：

<script language="javascript" type="text/javascript">
    $("div#div_<?= $divToShow ?>").show();
    $("div:not(#div_<?= $divToShow ?>)").hide();
</script>

Answer 2

我会用PHP编写代码，如下所示：

page.php文件？ID = idofdiv

<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
function showonlyone(thechosenone) {
 $('.newboxes').each(function(index) {
      if ($(this).attr("id") == thechosenone) {
           $(this).show(200);
      }
      else {
           $(this).hide(600);
      }
 });
}
$(document).ready(function(){
$("#<?php echo $_GET['id']; ?>").show();
});
</script>
</head>
<body>

         <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
            <a id="myHeader1" href="javascript:showonlyone('newboxes1');" >show this one only</a>
         </div>
         <div class="newboxes" id="newboxes1" style="border: 1px solid black; background-color: #CCCCCC; display: block;padding: 5px; width: 150px;">Div #1</div>


         <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
            <a id="myHeader2" href="javascript:showonlyone('newboxes2');" >show this one only</a>
         </div>
         <div class="newboxes" id="newboxes2" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px; width: 150px;">Div #2</div>

         <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
            <a id="myHeader3" href="javascript:showonlyone('newboxes3');" >show this one only</a>
         </div>
         <div class="newboxes" id="newboxes3" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px; width: 150px;">Div #3</div>

我所做的是：

$(document).ready(function(){
$("#<?php echo $_GET['id']; ?>").show();
});

解析PHP（服务器端）时，它会发送url（$ _GET ['id']）中给出的id来解析你的jQuery代码。文档准备好后，此代码将执行。

如果$ _GET ['id']为空或不存在，则不会发生任何事情（没有要显示的div）。

Answer 3

与往常一样，有许多解决方案，但是我们在应用程序中有类似的要求，我们希望一个页面向另一个页面发送消息以显示给用户。例如，更新设置后返回主页面，顶部显示“设置已更新”消息。我们的解决方案是在URL中发送消息，然后在每个页面加载时运行一个javascript，在URL中查找消息。如果它在那里向用户显示，如果它不存在，则没有任何反应。

在我们常见的pageLoad例程（每页的javascript）中，我们

if (jQuery.query.get('fadeMessage'))
{
    FadeMessage(jQuery.query.get('fadeMessage'));
}

然后将FadeMessage定义为：

function FadeMessage(message) {
jQuery('#fadeMessage').html(message).animate({ "top": "0" }, 1000).delay(2000).animate({ "top": "-80px" }, 1000);

}

“fadeMessage”div在每个页面上都显示为：

<div id="fadeMessage">
</div>

虽然我正在打字，但我认为我们可以在需要时注入该div。嗯...： - ）

Answer 4

有两个步骤要做：首先我们需要知道如何在我们的域中使用参数，最后需要切换内容。

1）您可以按如下方式向被调用文件添加参数：

http://server/path/file?key=value

对于这个例子，我们使用密钥page。所以这些是您需要链接的网址：

http://server/path/file?page=div-1
http://server/path/file?page=div-2

2）将你的代码拆分成一个包含现在所有内容的php文件和两个你自己喜欢的内容，例如div-1.php和div-2.php。在后者中复制特定的div-1和div-2内容。

3）最后打开你的主要php文件并删除div-1和div-2。它们现在应该都在其他文件中。并输入以下php代码：

<?php
if (isset($_REQUEST['page']) === false || in_array($_REQUEST['page'], array('div-1', 'div-2')) === false) {
    $_REQUEST['page'] = 'div-1';
}
include $_REQUEST['page'] . '.php';
?>

那个网址将调用php文件，将其内容推送到浏览器，同时推送它执行我们输入的脚本。脚本验证是否设置了url参数页面，检查它是否有效并推送第二个文件就在我们之前放置脚本的地方。出于安全原因，非常需要后一项检查（见下文）！

注意：以下代码行用于显示默认页面，例如index或start。它可以很容易地改变。

$_REQUEST['page'] = 'div-1';

注意：我们需要关心安全性，因此不允许不存在的页面。如果我们不这样做，可以执行服务器上的各种PHP脚本。只需在上面的if语句中更改，编辑或添加其他元素：

array('div-1', 'div-2')

Answer 5

只有在页面加载时检查URL的哈希部分，才能使用Javascript / jQuery执行此操作：

http://mydomain.com/some/path#showcontainer1

HTML

<div class="container_one" style="display:none;">Content</div>
<div class="container_two" style="display:none;">Other Content</div>

JS

$(function(){

  switch( window.location.hash ){
    case '#showcontainer1':  //if hash is #showcontainer1
      $('.container_one').fadeIn();   //fadein the container with some class 
      break;
    default:
      $('.container_two').fadeIn()   //else fade container with other class
      break;
  }

});

通过向URL添加代码来显示特定的div

5 个答案: