4

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

<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'scss 将无法工作。任何人都可以帮助解决问题吗？

4

4 回答 4

5

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

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

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

作为侧节点：

$(function() {});

简称

$(document).ready(function(){ ... });
于 2013-05-22T06:14:10.633 回答
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'); 
})
于 2013-05-22T06:15:53.983 回答
1

谢谢大家。

解决了这个问题。我在每个页面中都包含了addclass，否则在加载时它将不起作用。
在header.php文件中，我将当前页面 url 分配给了一个变量page，以便在任何包含头文件的页面中，页面变量都是可访问的。 

 $(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'); } });
于 2013-05-23T11:31:52.727 回答
0

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

$(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');
});
于 2013-05-22T06:31:01.463 回答