how to set default la page as default in css

Question

I have been struggled with one sticky issue regarding to set default li.

what I try to achieve is that set a li and its related page as default one. And when users click on others links, it would load other pages.

HTML Markup:

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

In my case, I want to set the "Picutre" li as default page, and when user click on comments, it would load corresponding page. And also the background colour should also be changed.

Answer 1

Your page logic lives in your PHP, so specifying which page should display by default can be added there by modifying your if statements and making them into if...else instead:

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

The logic implemented above goes like this: if the "Comments" or "Others" pages are requested, serve them, but if not then just serve the "Pictures" page.

Since you also want to load the "Picture" content when the page is initially loaded, you can call the show() function in your Javascript on pageload. Adding the following line to your existing jQuery(document).ready(function () { ... } should work as long as $row["id"] is properly set:

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