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对超链接网址 - 如果匹配应用你的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匹配的菜单链接（超链接/标签）。然后就是找到容器div并添加你的类。

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

我个人每页都会注册一个与其中一个菜单链接对应的页面ID。像这样......

HTML

注意添加到每个menuHeader div的 data-associated-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这样的服务器端语言，那么您可以执行类似https://stackoverflow.com/a/11814284/81053

的操作

Answer 2

注意：Chris提供的答案效果非常好，但您必须在href的{{1}}中实际拥有该链接，否则它将是<a></a>。

您可以使用该链接向undefined添加id，然后使用

Chris提供的代码

（这样页面就不会重定向，因为你点击了链接但会运行该功能）

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

和JS

<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'); });添加到有效menuHeaderActive并将其从该特定页面上的另一个页面中删除

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

2 个答案: