名为index.php的页面包含1个菜单和3个选项。菜单链接指向URL:index.php？id_product=xy。然后PHP使用GET读取id_product并从数据库中打印详细信息。现在我想突出显示（更改文本的颜色）最后点击的菜单项。如何做到这一点？是否可以使用jQuery读取id_product表单URL的值，然后为单击的菜单项添加文本效果？有什么想法吗？
<ul>
<li><a href='index.php?id_product=1'>1</a></li>
<li><a href='index.php?id_product=2'>2</a></li>
<li><a href='index.php?id_product=3'>3</a></li>
</ul>
首先，为元素添加一些id标记：
<ul>
<li><a id="1" href='index.php?id_product=1'>1</a></li>
<li><a id="2" href='index.php?id_product=2'>2</a></li>
<li><a id="3" href='index.php?id_product=3'>3</a></li>
</ul>
然后使用javascript/jquery和少量php:将类"highlight"添加到适当的$_GET变量中
<script>
jQuery(document).ready(function($) {
var selected_product = "<?php echo $_GET['id_product']; ?>";
if(selected_product !== "")
$("#"+selected_product).addClass("highlight");
});
</script>
最后用css创建高亮类：
<style>
a.highlight { color: red; }
</style>
<?php
$menu_items = array(1, 2, 3);
$product_id = $_GET['id_product'];
echo "<ul>";
foreach($menu_items as $menu_item){
echo "<li><a href='index.php?id_product=" . $menu_item . "'" . (isset($product_id) && $product_id == $menu_item ? " class='active'" : "") . ">" . $menu_item . "</a></li>";
}
echo "</ul>";
?>
这将在基于id_product 的菜单项中添加一个活动类
这应该是工作。
$(function()){
var file_url = window.location.pathname.substring(window.location.pathname.lastIndexOf('/')+1)
$("ul > li > a[href="+file_url+"]").addClass("selected");
}
另一种方式应该是
$(function(){
$("ul > li > a[href$='"+window.location.search+"']").addClass("selected");
})
无论如何，只有使用php才更容易：）
foreach ($products as $p) {
$selected = ($_GET["id_product"]==$p->id)?" class='selected'":"";
echo "<a href='?id_product=".$p->id."'".$selected.">".$p->id."</a>";
}
或
<style>
a[href*='id_product=<?=$_GET["id_product"]?>']{ color:red; }
</style>