突出顯示所選菜單項

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創建Highlight類：

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