6

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

$('.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";
        }
4

2 回答 2

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-tag）。然后是找到容器 div 并添加您的类的情况。

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

就我个人而言，我会让每个页面注册一个对应于其中一个菜单链接的页面 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

于 2013-04-02T12:51:32.450 回答
1

注意：克里斯提供的答案非常有效，但您必须在hrefof中实际拥有链接<a></a>，否则它将是undefined.

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

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>

和 JS

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

附带说明一下，如果这是一个不同的页面，您只需将其添加menuHeaderActive到活动页面a并将其从该特定页面上的另一个页面中删除

于 2013-04-02T13:07:30.257 回答