通过将代码添加到 URL 来显示特定的 div答案

【问题标题】：Show a specific div by adding code to URL通过将代码添加到 URL 来显示特定的 div
【发布时间】：2012-08-01 21:15:45
【问题描述】：

我以这段代码为例：

<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），所以如果您选择帮助，请详细说明。

【问题讨论】：

标签： php jquery url html show

【解决方案1】：

我会用 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 中给出的 id ($_GET['id']) 以在您的 jQuery 代码中解析。此代码将在文档准备好时执行。

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

【讨论】：

【解决方案2】：

与往常一样，有很多解决方案，但是我们在应用程序中有类似的要求，我们希望一个页面向另一个页面发送消息以显示给用户。例如，更新设置后返回主页，顶部显示“设置已更新”消息。我们的解决方案是在 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。嗯... :-)

【讨论】：

【解决方案3】：

有多种方法可以完成您想要在此处执行的操作。我将解释您如何使用$_GET 来做到这一点。

您可以使用 $_GET 变量来控制它（在 URL 的末尾，只需添加 ?varName=value 其中 varName 是变量的名称（这是任意的），value 是您的值想要分配它。

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

<?php
    $divToShow = isset($_GET['div']) ? $_GET['div'] : "";

    //logic here
?>

因此，例如，如果您希望显示 <div id="div_2">，您可以通过以下方式将其插入 jQuery：

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

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

<?php
// set $divId to a value

if ($divId == $divToShow) : ?>
    <div id="<?= $divId ?>">
        <!-- content here -->
    </div>
<?php endif; ?>

【讨论】：

【解决方案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';
?>

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

注意：以下代码行用于显示默认页面，例如index 或 start。它可以轻松更改。

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

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

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

【讨论】：

【解决方案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;
  }

});

【讨论】：

如何定义哪个div是哪个容器？你能提供更多的代码来展示这个吗？
更新了答案。请注意，此解决方案不涉及内容的动态加载，而只是根据 URL 显示/隐藏一些容器。