在您點擊鏈接的DIV基礎上顯示不同內容

我有一個演示網站我一直在嘗試一些功能。我想要做的只是根據您點擊該頁面的鏈接顯示綠色或藍色的DIV。在您點擊鏈接的DIV基礎上顯示不同內容

這裏是我現在使用的示例主頁，但它需要我建立3個單獨的頁面來顯示結果; all.php，green.php和blue.php。我想只有一個頁面，並隱藏或根據需要

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

顯示的DIV這是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>

的內容，您可以提供任何幫助將是巨大的！

來源

2013-03-19 Spectre

這些div全部放在一個頁面上嗎？你有什麼樣的循環將它們放在一起？ – George 2013-03-19 22:25:14

您的HTML鏈接上有一個格式不正確的結束錨點標記。 – 2013-03-19 22:35:03

他們目前手動卡住，我想在未來自動生成 – Spectre 2013-03-19 22:38:33

的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()語句（但請確保檢查文件是否存在！），並在應用程序中包含多個樣式文件。

來源

2013-03-19 22:37:46

我現在有20個，這只是一個專家。 5紅色5綠色5藍色和5黃色 – Spectre 2013-03-19 22:42:26

良好的錯誤檢查電話 – Spectre 2013-03-19 22:45:00

這看起來像我想做的事情，是的，與PHP有點樂趣是一天的順序。但我在網站上試過這個，沒有顯示出來（注意：我在你的代碼中加入了div） – Spectre 2013-03-19 23:02:31

你可以加載它，並將它們放在不同的類中，然後使用jQuery加載它們。我做了一個例子 - 檢查出來here.

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

類似的東西 - 然後向他們展示的onclick按鈕。

來源

2013-03-19 22:30:52

我不知道我在做什麼錯，但我複製了這個例子，它總是顯示所有的divs – Spectre 2013-03-19 22:57:20

偉大的示例網站，我感謝努力！ – Spectre 2013-03-19 23:10:43

您是否點擊了底部示例中的按鈕？當它顯示爲藍色時，它會顯示所有藍色，但按鈕仍然存在（位於底部，但您可能需要滾動）。然後綠色會做同樣的事情，等等。它似乎爲我工作...只是要清楚，我使用jQuery來做到這一點，所以如果你沒有加載jQuery，那麼它不會工作正常。 – 2013-03-20 03:18:25

只要寫這樣的事情到你的身體標記

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

...

來源

2013-03-19 22:36:11

在您點擊鏈接的DIV基礎上顯示不同內容

回答

相關問題