javascript - 突出显示选定的菜单项

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>