根据您单击的链接在 DIV 中显示不同的内容答案

【问题标题】：Display diffrent content in a DIV base on which link you click根据您单击的链接在 DIV 中显示不同的内容
【发布时间】：2013-03-08 20:11:52
【问题描述】：

我有一个演示网站，我一直在尝试一些功能。我想要做的只是根据您点击进入页面的链接显示绿色或蓝色的 DIV。

这是我现在使用的示例主页，但是它需要我构建 3 个单独的页面来显示结果； all.php、green.php 和 blue.php。我希望只有一页并根据需要隐藏或显示 DIV

<?php


    // which page should be shown now
    $page = (isset($_GET['page']) && $_GET['page'] != '') ? $_GET['page'] : 'home';



    // only the pages listed here can be accessed
    // any other pages will result in error
     $allowedPages = array('home',
        'all',
        'blue',
        'green',


     )
    ;


        if (!in_array($page, $allowedPages) || !file_exists($page . '.php')) {
            $page = 'notfound';
        } 

        // set prettier title
        //$title .= ($page != 'home') ? ' - ' . ucfirst($page) : '';



    // start output buffering so headers can be used in sub pages
            ob_start();



    ?> <html>
          <head>
            <title>tester</title>
            <link rel="stylesheet" href="nav.css" type="text/css" media="all" />
            <script type="text/javascript" src="sucker.js"></script>
          </head>
          <body>
            <ul id="nav">
              <li>
                <a href="index.php?page=all">All Color</a>
              </li>
              <li>
                <a href="index.php?page=green">Greew/a>
                <ul>
                  <li>
                    <a href="index.php?page=blue">Blue</a>
                  </li>

                </ul>
              </li>

            </ul>
            <div class="clear"></div>
        <?php


        include($page . '.php');

        ?>

          </body>
        </html>

这是all.php的内容

        <div style="min-height: 245px; border: 2px solid transparent;" class="itemWrapper">
            <a class="itemLink" href="http://www.demo.com/products/blue1.jpg">
            <img src="images/products/hold.jpg" class="itemImage" style="width:150px;;height:150px;;"/></a>
            <h3 class="itemTitle"> Blue Item 1</a></h3>
            <p class="itemPrice">$5.00</p>
            <img style="display: none;" class="quickViewBtn" src="images/products/quick_view.png" />
        </div>

        <div style="min-height: 245px; border: 2px solid transparent;" class="itemWrapper">
            <a class="itemLink" href="http://www.demo.com/products/blue2.jpg">
            <img src="images/products/hold.jpg" class="itemImage" style="width:150px;;height:150px;;"/></a>
            <h3 class="itemTitle"> Blue Item 2</a></h3>
            <p class="itemPrice">$3.00</p>
        <img style="display: none;" class="quickViewBtn" src="images/products/quick_view.png" /></div>

        <div style="min-height: 245px;" class="itemWrapper">
            <a class="itemLink" href="http://www.demo.com/products/blue3.jpg">
            <img src="images/products/hold.jpg" class="itemImage" style="width:150px;;height:150px;;"/></a>
            <h3 class="itemTitle"> Blue Item 3</a></h3>
            <p class="itemPrice">$4.00</p>
        <img style="display: none;"  class="quickViewBtn" src="images/products/quick_view.png" alt= "Quick View" /></div>

        <div style="min-height: 245px;" class="itemWrapper last">
            <a class="itemLink" href="http://www.demo.com/products/green1.jpg">
            <img src="images/products/hold.jpg" class="itemImage" style="width:150px;;height:150px;;"/></a>
            <h3 class="itemTitle"> Green Item 1</a></h3>
            <p class="itemPrice">$1.00</p>
        <img style="display: none;"  class="quickViewBtn" src="images/products/quick_view.png" /></div>

          <div style="min-height: 245px;" class="itemWrapper last">
            <a class="itemLink" href="http://www.demo.com/products/green2.jpg">
            <img src="images/products/hold.jpg" class="itemImage" style="width:150px;;height:150px;;"/></a>
            <h3 class="itemTitle"> Green Item 2</a></h3>
            <p class="itemPrice">$2.00</p>
        <img style="display: none;"  class="quickViewBtn" src="images/products/quick_view.png" /></div>

      </div>

您能提供的任何帮助都会很棒！

【问题讨论】：

这些 div 是否都在一个页面上？您是否有某种循环将它们组合在一起？
绿色链接上的 html 中有一个格式错误的结束锚标记。
它们目前是手动卡住的，我想将来自动生成
但是绿色和蓝色的项目永远不会出现在同一页面上？
他们目前在 all.php 上做

标签： php css class html

【解决方案1】：

您可以将它们全部加载，并将它们放在不同的类中，然后使用 jQuery 加载它们。我做了一个例子 - 看看here.

$(document).ready(function() {
    $(".green").hide();
    $(".blue").hide();

类似的东西 - 然后在点击按钮时显示它们。

【讨论】：

我不确定我做错了什么，但我复制了这个例子，它一直显示所有的 div
很好的示例网站，感谢您的努力！
您是否点击了底部示例中的按钮？当你让它显示蓝色时，它显示所有蓝色，但按钮仍然存在（在底部，但你可能需要滚动）。然后绿色会做同样的事情，等等。它似乎对我有用......只是为了清楚，我正在使用 jQuery 来做这件事，所以如果你没有加载 jQuery，那么它就不会工作正确。

【解决方案2】：

在你的body标签里写这样的东西

<body class="
<?php

... if isset... if in_array
switch ($page)
{ 
    case "green":
        echo "body_green";
    break;

    case "blue":
        echo "body_blue";
    break;

    default:
        echo "";
}
?>
">

在你的 CSS 中

.green, .blue {
  display:none;
}

.body_green .green {
  display: block;
}

...

【讨论】：

【解决方案3】：

如果你希望它是无缝的，jQuery/JavaScript 是这里的方法，但既然你说这只是一种“测试”网站，我假设你正在做更多的事情来试验 PHP 并拥有乐趣。因此，您需要做的是将所有三个页面放入一个文件中，然后将所有三个页面包装在一个 if...then 语句中。有效：

<?php
if (!isset($_POST['page'])) {
    //let the user make a choice
} else if ($_POST['page'] == 'green') {
    ?> 
    <!--HTML for the "green" pages goes here!-->
    <?php
} else if ($_POST['page'] == 'blue') {
    ?> 
    <!--HTML for the "blue" pages goes here!-->
    <?php
} else {
    print("Invalid page selection!"); //Keep in mind, we want to "error check" to make sure the user actually selected a page
}
?>

如果你有更多的“页面”，你应该使用 switch 语句。如果这是一个非常大的应用程序，您可以使用 include() 语句（但请确保检查该文件是否存在！）并在您的应用程序中包含多个样式文件。

【讨论】：

我现在有 20 个，这只是一个专家。 5红5绿5蓝5黄
这看起来像是我想做的，是的，用 PHP 来点乐趣是当务之急。但是我在网站上尝试过，但没有任何显示（注意：我将 div 添加到您的代码中）
感谢您的帮助绿色页面的 HTML 在这里！蓝色页面的 HTML 在这里！