0

いくつかの機能を試しているデモWebサイトがあります。私がやろうとしているのは、ページをクリックしたリンクに基づいて、緑または青でDIVを表示することだけです。

これが私が現在使用しているメインページの例ですが、結果を表示するには3つの別々のページを作成する必要があります。all.php、green.php、およびblue.php。ページを1つだけにして、必要に応じて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>

あなたが提供できるどんな助けも素晴らしいでしょう！

4

3 に答える 3

0

すべてをロードして、それらを異なるクラスに入れ、jQueryを使用してロードすることができます。私は例を作りました-ここでそれをチェックしてください。

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

そのようなもの-そしてボタンのクリックでそれらを表示します。

于 2013-03-19T22:30:52.457 に答える
0

このようなものを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;
}

...
于 2013-03-19T22:36:11.440 に答える
0

jQuery / JavaScriptは、シームレスにしたい場合にここに行く方法ですが、これは一種の「テスト」サイトであると言っているので、PHPを試して楽しんでもらうためにもっとや​​っていると思います。したがって、必要なのは、3つのページすべてを1つのファイルに入れてから、3つのページすべてを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-19T22:37:46.103 に答える