Javascript Onclick使用Jquery添加边框底部

我创建了使用jQuery的项目。其中有导航。当我点击这个导航时，它会显示内容。现在，我正在尝试使用add CSS或class方法将这个可点击的导航添加到边框底部效果。首先，导航是默认点击的

下面我将显示我的JQuery代码：

 $('.nav-collapse a').click(function () {
        $('.bb-wizard-page ').hide();
        $(this.getAttribute('datahref')).show()
    });

---

如果我理解正确，您希望将底部边框添加到您选择的导航项目中

我在现有代码之前和之后添加了两行代码

$this

只是jQuery选择器对单击链接的快速缓存

$menuLinks

从单击的链接遍历到其父链接（菜单栏），然后查找所有子链接

$('.nav-collapse a').click(function () {
    const $this = $(this);
    const $menuLinks = $this.parent().find(".nav-link");

    $('.bb-wizard-page ').hide();
    $(this.getAttribute('datahref')).show();

    // Remove 'selected' class from links
    $menuLinks.removeClass("selected");
    // Adds 'selected' class to clicked link
    $this.addClass("selected");

});

---

从那里，您可以为

.nav link创建一个css类。选择具有所需样式的
。
是否
datahref
是
a
元素上的数据属性？如果是这样，并且您使用jQuery获取该数据属性值，则可以使用
$（this.data（'href'）
，将其存储在变量中，并将其保存在选择器中。如果
datahref
是一个数据属性，那么我将编写一个实际的示例，这是适用的。如果您试图只使用
href
属性，那么当我使用URL中显示的hef then#TabName时，我将调整应答，这对我来说是不必要的。这就是为什么我使用这个datahrefwhat
this.getAttribute（'datahref'）
return？它不返回url中的任何内容，只显示这个ab的内容。这就是我的意思。如果您要
console.log（this.getAttribute（'datahref'））
它会显示什么？它工作得很好，但我需要默认选择第一个选项卡，并需要下面第一个选项卡id的代码：
，具体取决于HTML的生成方式，您可以手动将
所选的
类添加到第一个a.nav-link中，如果生成页面时无法添加该类，则始终可以在页面加载后手动添加该类。