Question

最后为wordpress设计了一个漂亮的导航器，但是现在点击链接时不会保持突出显示，因为它会转到不同的页面。我需要帮助改进javascript代码

<li class='last' id="meet">
    <a href='?page_id=7'><span>Meet Dr. Ayala</span></a>
</li>

成为这个

<li class='active' id="meet">
    <a href='?page_id=7'><span>Meet Dr. Ayala</span></a>
</li>

我确信身体标签上需要<body onload="onload()">。有人可以解释一下如何解决这个问题吗？

编辑：我设法找到一个工作函数，但需要转换为onload而不是单击按钮

<script>
$(document).ready(function(){
  $("button").click(function(){
document.getElementById("meet").className = "active";
 });
});
</script>

Answer 1

您可以使用jquery添加/删除类

e.g

$("#meet").addClass("Active");
$("#meet").removeClass("Active");

Answer 2

我认为你正在使用php。您可以将页码导航放在身体标签或其他解决方案中。

url：http://mydomain?page_id=7

选择$_GET['page_id']

在你的身体标签中加入一些东西

<body id="page_<?php echo $_GET['page_id'];?>">

然后在JavaScript中你可以读取body标签的id。拆分数字。在菜单中添加一些课程

<li class='menu_7'></li>

使用从body标签id中提取的数字，您可以定位菜单类。

希望这种情况会对你有所帮助。您还可以在页面中添加静态编号。这样你肯定知道你得到了一个价值。这是因为您的浏览器必须加载新页面。

其他场景可能是iframe或Ajax

$(document).ready(function () {
    var nr = $("body").attr("id").split("_");
    $(".menu_" + nr[1]).addClass("active");

});

Answer 3

终于搞定了 <script> function onload() { document.getElementById("meet").className = "active"; } window.onload = onload; </script>

Answer 4

给它一个去，它会找到当前的链接，并跳回到它的父级并给它一个活动的类。

$(document).ready(function(){
   var urlBits= document.URL.split('/');
   var current = urlBits[urlBits.length-1];
   $('a[href="'+current+'"').parent('li').addClass('active');
}

上传更改类Javascript

4 个答案: