Javascript 如何在选择菜单时应用CSS？

我有一项任务，在加载页面时突出显示选中的菜单。为此，我有以下代码：

$('.menuHeader').each(function () {
    $(this).attr('id', 'menu' + ($(this).index() + 1));
    $(this).val($(this).index() + 1);

    // Set the dynamic ids for links
    $(this).find('a').attr('id', 'link' + ($(this).index() + 1));
    //alert('New ID  :  ' + $(this).find('a').attr('id'));
});

$('.menuHeader a').click(function () {
    alert("a");
    $('.menuHeader a').removeClass('menuHeaderActive');
    $(this).parent().parent(".menuHeader").addClass('menuHeaderActive');
});

但是，当我选择第二个菜单时，它会刷新并丢失所选内容

HTML:

---

我想你可以修改你的超链接以包含正确的url。然后，在jQuery中，根据超链接url测试浏览器的当前url-如果匹配，则应用

菜单头活动

类

$(document).ready(function () {
    var currentUrl = window.location.href;
    var menuLink = $('.menuHeader a[href="' + currentUrl + '"]');
    menuLink.parent().parent(".menuHeader").addClass('menuHeaderActive');
});

单击其中一个菜单链接后重新加载页面时，我显示的脚本应运行并

$（'.menuHeader a[href=“'+currentUrl+”）

应找到与用户导航的url匹配的菜单链接（超链接/a标签）。然后是查找容器div并添加类的情况

基本上，当用户单击菜单链接时，您不会添加css类；您必须在页面重定向到其他页面后设置css类。因此，另一个页面必须根据正确的活动菜单链接设置css类。有100种方法可以做到这一点，但基于您提供的匹配URL是最简单的

就我个人而言，我会让每个页面注册一个页面id，该id对应于一个菜单链接。像这样的

HTML

请注意添加到每个menuHeader div的与页面id关联的属性数据

<div class="menuBar">
    <div class="menuHeader ui-corner-top" data-associated-page-id="home-welcome">
        <span><a href="#" onclick="Home()">Home</a></span>
    </div>
    <div class="menuHeader ui-corner-top" data-associated-page-id="energy-catagory-index">
        <span><a href="#" onclick="NewTransaction()">New Transaction</a></span>
    </div>
</div>

能源分类索引页aka..//的文件就绪处理程序。./EnergyCatagory/index

$(document).ready(function () {
    SetActiveMenuCssClass('energy-catagory-index');
});

全局定义的函数

function SetActiveMenuCssClass(pageId) {
    // finds div with menuHeader class that has the attribute data-associated-page-id equal to the page id
    // then sets the active class
    $('.menuHeader[data-associated-page-id="' + pageId + '"]')
        .addClass('menuHeaderActive');
}

---

如果您使用的是像PHP这样的服务器端语言，那么您可以这样做

注意：Chris提供的答案非常有效，但是您必须在

的

href

中实际拥有链接，否则它将是

未定义的

您可以使用链接将
id
添加到
a
，然后使用

var menuLink = $('#'+currentUrl);


Chris提供的代码

（这样，页面不会重定向，因为您单击了链接，但会运行该函数）

另一方面，如果这是一个不同的页面，您只需将
menuHeaderActive
添加到活动的
a
中，然后将其从该特定页面的另一个页面删除即可。反复使用
$（这个）
是不好的做法。将其存储到变量中并使用该变量。如果在NewTransaction（）函数中刷新页面，则应用的CSS将设置为默认值，而不刷新页面page@Dineshkani-是的。。这就是问题所在Home（）和NewTransaction（）实际上做什么？导航到其他页面？您是否也在使用服务器端技术？@ChrisMoutray-是的，它将导航到page@ChrisMoutray-但它并没有进入function@Agent1你能说得更具体一点吗？哪个功能<代码>$（文档）.ready（函数（）{…}）
是jQuery的基础，因此，如果您无法使用此基本功能，我不确定是否可以在没有更多详细信息的情况下提供帮助……您有没有想法使用cookie实现此功能？@Agent1是您的菜单静态，因为始终有X个菜单项可供选择？或者它会随着你选择的页面而改变吗？我用另一种方式@chrismoutray在你提到的第一个关于id的方法中这样做。你能解释一下吗
$(document).ready(function () {
    SetActiveMenuCssClass('energy-catagory-index');
});

function SetActiveMenuCssClass(pageId) {
    // finds div with menuHeader class that has the attribute data-associated-page-id equal to the page id
    // then sets the active class
    $('.menuHeader[data-associated-page-id="' + pageId + '"]')
        .addClass('menuHeaderActive');
}

var menuLink = $('#'+currentUrl);

<div class="menuBar">
    <div class="menuHeader ui-corner-top menuHeaderActive">
        <span><a href="#" id="http://www.yourwebsite.url//home/welcome" onclick="Home()">Home</a></span>
    </div>
    <div class="menuHeader ui-corner-top">
        <span><a href="#" id="http://www.yourwebsite.url/EnergyCatagory/index" onclick="NewTransaction()">New Transaction</a></span>
    </div>
</div>

$(document).ready(function () {
    var currentUrl = window.location.href;
    var menuLink = $('#'+currentUrl);
    menuLink.parent().parent(".menuHeader").addClass('menuHeaderActive');
});