如何在css中将默认la页面设置为默认值

时间:2013-05-04 18:21:31

标签: php jquery html

我一直在努力解决有关设置默认li的一个棘手问题。

我尝试实现的是将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”li设置为默认页面,当用户点击评论时,它会加载相应的页面。而且背景颜色也应该改变。

1 个答案:

答案 0 :(得分: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">';
}

上面实现的逻辑如下:如果请求“评论”或“其他”页面,请提供服务,但如果没有,则只提供“图片”页面。

由于您还希望在最初加载页面时加载“图片”内容,因此您可以在页面加载中调用Javascript中的show()函数。只要jQuery(document).ready(function () { ... }设置正确,就可以将以下行添加到现有$row["id"]

show($row["id"], 1);