Question

我有一个带有以下链接的菜单栏。

<div class="menu">
<ul>
  <li><a href="aboutus.php" onclick="changecss(1)">About Us</a></li>
  <li><a href="services.php" onclick="changecss(2)">Services</a></li>
  <li><a href="career.php" onclick="changecss(3)">Career</a></li>
  <li><a href="contactus.php" onclick="changecss(4)">Contact Us</a></li>
</ul>
</div>

我想在菜单栏中激活当前页面链接。所以我使用的是addclass方法..

$(".menu ul li a").click(function() 
{
  $(".menu ul li a").removeClass('selected');
  $(this).addClass('selected');
});

所有这些代码都位于 header.html 页面，这是我的头文件。我在其他每个页面都使用php包含此页面。

问题在于，当我点击菜单栏链接时，addclass正在运行，但在页面加载时（到href页面），addclass's css不会工作。任何人都可以帮忙解决问题吗？

Answer 1

您是否使用文档就绪方法？如果没有，那就有你的问题。执行jQuery代码时，DOM未完全加载。像这样执行你的代码：

$(function(){
    $(".menu ul li a").click(function() { 
        $(".menu ul li a").removeClass('selected'); 
        $(this).addClass('selected'); 
    });
});

...或者...只需在页面底部的脚本标记中执行您的代码（在关闭正文标记之前）。

作为旁边节点：

$(function() {});

是

的缩写

$(document).ready(function(){ ... });

Answer 2

尝试使用document.ready

$(document).ready(function(){
    $(".menu ul li a").click(function() { 
        $(".menu ul li a").removeClass('selected');
        $(this).addClass('selected'); 
    });
     //Here defaulty add class for first link on page load like
    $(".menu ul li a:eq(0)").addClass('selected'); 
})

Answer 3

感谢所有人。

解决了这个问题。我在每个页面都包含 addclass ，否则加载它将无效。
在 header.php 文件中，我将当前页面网址分配给变量页面，以便在包含头文件的任何页面中都可以访问页面变量。

 $(document).ready(function(){`<br/> 
   if(page=="localhost/workspace/pjt/aboutus") {` <br/>
   $(".menu ul li a").removeClass('selected');` <br/>
   $(".menu ul li a#about").addClass('selected'); } });

Answer 4

最好在服务器端代码中执行此操作，但也可以在客户端执行此操作。您必须获取当前页面地址，然后根据它选择您的链接：

$(function () {
    // get the current page
    var link = window.location.href.split('/');
    page = link[link.length - 1];

    // now select the link based on the address
    $('.menu ul li a[href*="' + page + '"]').addClass('selected');
});

加载页面时，添加了addclass的css不起作用

4 个答案: