1

我以这段代码为例：

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

4

5 回答 5

1

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

1）您可以将参数添加到被调用的文件中，如下所示：

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

对于这个例子，让我们使用 key 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')
于 2012-08-03T19:52:32.253 回答
1

有多种方法可以在这里完成您想做的事情。我将解释如何使用$_GET.

您可以使用$_GET变量来控制它（在 URL 的末尾，只需添加?varName=valuewherevarName是变量的名称（这是任意的），并且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; ?>
于 2012-08-03T19:42:39.113 回答
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 ($_GET['id']) 中给出的 id 以在您的 jQuery 代码中解析。此代码将在文档准备好时执行。

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

于 2012-08-03T19:45:43.383 回答
1

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

于 2012-08-03T19:48:17.700 回答
0

您只能通过在页面加载时检查 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;
  }

});
于 2012-08-03T19:44:31.323 回答