デフォルトの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」をデフォルトのページとして設定し、ユーザーがコメントをクリックすると、対応するページが読み込まれます。また、背景色も変更する必要があります。