-1

カート.php

  <div id="main-container">
  <div class="container">
  <span class="top-label">
  <span class="label-txt">Shopping Cart</span>
  </span>

  <div class="content-area">

        <div class="content drop-here">
        <div id="cart-icon">
            <img src="img/Shoppingcart_128x128.png" alt="shopping cart" class="pngfix" width="128" height="128" />
        <img src="img/ajax_load_2.gif" alt="loading.." id="ajax-loader" width="16" height="16" />
            </div>

        <form name="checkoutForm" method="post" action="order.php">

            <div id="item-list"></div>

            </form>                
            <div class="clear"></div>
            <div id="total"></div>

            <div class="clear"></div>

    <a href="" onclick="document.forms.checkoutForm.submit(); return false;" class="button">Checkout</a>

      </div>

    </div>

    <div class="bottom-container-border"></div>
   </div>



  </div>

ここにindex.phpがあります

    include "cart.php";

     ....
     ....
     <div class= "cart"></div> 
     .....
      .....

      <div class="basket"><a href="#" onclick appear cart.php ><span>Shopping Basket</span></a>
      <p><span><?php echo "Amount: ".$ttl ?> </span>Item(s): <strong><?php echo $cnt ?>  </strong></p>
     </div>

私がやりたいのは、cart.phpを

  <div class= "cart"></div>

cssファイルで表示プロパティをnoneに設定しても、index.phpをロードすると、すべてのcart.phpがindex.phpの上に表示されます。

index.php の上にロードせずに div class = cart に cart.php をロードし、クリック イベントでのみ表示するにはどうすればよいですか?

前もって感謝します。

4

2 に答える 2

0

完全なコードを添付しています (cart.php を変更せずに使用)。フィドルでもテストできます。

<!DOCTYPE html>
<html>
    <head>
        <title>Test show()</title>
        <script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
        <script>
            $(document).ready(function() {

                // Show basket on click
                $('.show_basket').on("click", function(event) {
                    $('.cart').show();
                });

                // Hide basket on click
                $('.hide_basket').on("click", function(event) {
                    $('.cart').hide();
                });

                // Toggle basket - with some extra effects
                $('.toggle_basket').on("click", function(event) {
                    $('.cart').toggle('slow');
                });
            });
        </script>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
    </head>
    <body>
        <div>
            <a href="#" class="show_basket">SHOW BASKET</a><br/>
            <a href="#" class="hide_basket">HIDE BASKET</a><br/>
            <a href="#" class="toggle_basket">TOGGLE BASKET</a>
        </div>
        <div class="cart" style="display:none;"><?php include "cart.php"; ?></div>
    </body>
</html>

カートの CSSdisplay:none;を jquery (たとえば) に設定すると、クリック時に表示することができます。最も簡単な例は次のとおりです: http://api.jquery.com/show/

幸運を！

于 2013-09-09T16:31:28.623 に答える