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

Question

我有一项任务是在加载页面时突出显示所选的菜单.为此,我有以下代码:

$('.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:

<div class="menuBar">
    <div class="menuHeader ui-corner-top menuHeaderActive">
        <span><a href="#" onclick="Home()">Home</a></span>
    </div>
    <div class="menuHeader ui-corner-top">
        <span><a href="#" onclick="NewTransaction()">New Transaction</a></span>
    </div>
</div>

我怎么解决这个问题？

 function Home() {
            window.location.href = "../../home/welcome";
        }
        function NewTransaction() {
            window.location.href = "../../EnergyCatagory/index";
        }

Answer 1

我认为您可以修改您的超链接以包含正确的网址。然后在 jQuery 中测试浏览器当前 url 与超链接 url - 如果匹配则应用您的menuHeaderActive类。

$(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 种方法可以做到这一点，但根据您提供的匹配网址是最简单的。

就我个人而言，我会让每个页面注册一个与菜单链接之一相对应的页面 ID。像这样的东西...

超文本标记语言

请注意添加到每个 menuHeader div的属性data-associate-page-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>

JavaScript

添加到每个页面

欢迎页面的文档就绪处理程序，又名 ../../home/welcome

$(document).ready(function () {
    SetActiveMenuCssClass('home-welcome');
});

能源类别索引页的文档就绪处理程序，又名 ../../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 这样的服务器端语言，那么您可以执行类似的操作/sf/answers/826999911/