0

デフォルトのliの設定に関して、1つの厄介な問題に苦しんでいます。

私が達成しようとしているのは、li とその関連ページをデフォルトのページとして設定することです。また、ユーザーが他のリンクをクリックすると、他のページが読み込まれます。

HTML マークアップ:

  <div id="productIntro">
     <div id="leftNav">
        <ul>
           <li class="head">
              <a href="javascript:void(0)" onclick="show('.$row["id"].',1);"> Pictures</b></a>
           </li>
           <li class="head">
              <a href="javascript:void(0)" onclick="show('.$row["id"].',2);"> <b>Comments</b></a>
           </li>
           <li class="head">
              <a href="javascript:void(0)" onclick="show('.$row["id"].',3);"> <b>Others</b></a>
           </li>
        </ul>
     </div>
     <div class="main">
     </div>
  </div>

JS:

        function show(id, page) {
           $('.main').load("loadProDetail.php?id=" + id + "&page=" + page, true);
        }
        jQuery(document).ready(function () {
           $(document).on('click', '.head', function () {
              $(".head").removeClass("selected");
              $(this).toggleClass("selected");
           });
        });

loadProDetail PHP

  <?php
  $id = $_GET['id'];
  $sql = "select * from product where id=$id ";
  $result = mysql_query($sql);
  $row = mysql_fetch_assoc($result);
  $page = $_GET['page'];
  if($page == 1)
  {
     $html .= '<img src="./product_images/' . $row["name"] . '.jpg" width="150" border="2">';
  }
  if($page == 2)
  {
     $html .= 'No comments so far';
  }
  if($page == 3)
  {
     $html .= 'This page is under construction';
  }
  echo $html;

CSS:

.selected{background-color:red;}

私の場合、「Picutre」をデフォルトのページとして設定し、ユーザーがコメントをクリックすると、対応するページが読み込まれます。また、背景色も変更する必要があります。

4

1 に答える 1

1

ページ ロジックは PHP に存在するため、ifステートメントを変更してif...else代わりに次のようにすることで、デフォルトで表示するページを指定することができます。

if ($page==2) {
     $html .= 'No comments so far';
} else if ($page==3) {
     $html .= 'This page is under construction';
} else {
     $html .= '<img src="./product_images/'.$row["name"].'.jpg" width="150" border="2">';
}

上記で実装されたロジックは次のようになります。「コメント」または「その他」ページが要求された場合はそれらを提供しますが、そうでない場合は「画像」ページのみを提供します。

ページが最初にロードされるときに「画像」コンテンツもロードする必要があるため、ページロード時にshow()Javascript で関数を呼び出すことができます。既存の行に次の行を追加すると、適切に設定さjQuery(document).ready(function () { ... }れている限り機能します。$row["id"]

show($row["id"], 1);
于 2013-05-04T18:36:50.447 に答える