时间戳

首页 > 解决方案 > JQuery：尝试在主页上注入 css 并且锚标记 HREF 包含某些内容

jquery - JQuery：尝试在主页上注入 css 并且锚标记 HREF 包含某些内容

问题描述

我设置网站的方式，我的主页（“/”）也是一个 MVC 控制器/操作（“/Dashboard”）。我正在使用选项卡进行导航，因此仪表板对应于第一个选项卡。如果您在任何时候单击仪表板，我的代码将使选项卡处于活动状态，并且任何其他选项卡在导航到时都会处于活动状态。

但是，对于主页来说，这很棘手，因为我的代码会检查以匹配锚标记href以确定选项卡是否处于活动状态。如果我检查“/”，所有选项卡都将被激活，因为它们包含在每个选项卡中href（例如，“/Dashboard”、“/Dashboard2”等）。

这是（编辑）整个代码：

$(document).ready(function () {
    setNavigation();
});

function setNavigation() {
    var path = window.location.pathname;
    path = path.replace(/(?!^)\/$/, "");
    path = decodeURIComponent(path);

    $(".toptab a").each(function () {
        var href = $(this).attr('href');
        if ((path == "/") && (path.substring(0, href.length) == "/Dashboard")) {
            $(this).closest('li').addClass('m-menu__item m-menu__item--submenu m-menu__item--tabs m-menu__item--active m-menu__item--active-tab');            
        }
        else if (path.substring(0, href.length) === href) {
            $(this).closest('li').addClass('m-menu__item m-menu__item--submenu m-menu__item--tabs m-menu__item--active m-menu__item--active-tab');
        }
        else {
            $(this).closest('li').addClass('m-menu__item  m-menu__item--submenu m-menu__item--tabs')
        }
    });
}

编辑 1：这是我的主页锚标记<a class="m-menu__link" href="/Dashboard">所有其他锚在语法上都是相同的，唯一改变的是名称（例如，“/Dashboard2”将是页面 /Dashboard2 等）。

编辑 2：第二个和第三个 else if/else 条件用于将选项卡设置为活动/非活动。

有什么建议么？此代码不会触发。如果我只使用“/”部分，则所有选项卡都处于活动状态。

编辑 3：这是 HTML 在主页上的样子（最终else应用）：

<ul class="toptab m-menu__nav  m-menu__nav--submenu-arrow">
    <li class="m-menu__item m-menu__item--submenu m-menu__item--tabs">
        <a class="m-menu__link" href="/Dashboard">
            Dashboard
        </a>
        ...
    </li>
</ul>

标签： jquery

解决方案

我能够在第一条if语句中使用它来实现它：

if ((path == '/') && (href == '/Dashboard'))

推荐阅读