Question

页面名为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>

Answer 1

首先，为元素添加一些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>

Answer 2

<?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

将活动类添加到菜单项

Answer 3

这应该可行。

$(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>

突出显示所选菜单项

3 个答案: