获取点击它的导航项的名称 [英] get the name of the nav-item on which it was clicked

问题描述

我在 Bootstrap 中设计了一个 navbar，我想获取点击它的 nav-item 的名称.我可以将其设置为当前处于活动状态，但无法检索导航项的名称.如何实现这一目标?

我知道 jQuery 中的 nodeName 可以获取节点的名称，但显然我想获取该节点内部的内容.

HTML

<ul class="navbar-nav"><li class="nav-item active"><a class="nav-link" href="#">首页 <span class="sr-only">(当前)</span></a><li class="nav-item"><a class="nav-link" href="#">功能</a><li class="nav-item"><a class="nav-link" href="#">定价</a><li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a>

js

$(document).ready(function () {严格使用"；$('ul.navbar-nav > li').click(function (e) {e.preventDefault();var getItem = $(this);$('ul.navbar-nav > li').removeClass('active');$(this).addClass('active');$(".navbar-brand").after(" <ul class=\"navbar-nav\"><li class=\"nav-item active\"> <a class=\"nav-link\" href=\"#\">" + getItem + "(current)<\/span><\/a> <\/li><\/ul>");$('.navbar-toggler').click();});});

我的当前输出是 [object][object] 但我想获取 Home(如果当前处于活动状态)或 Pricing(如果当前处于活动状态)活跃.

PS:使用 Bootstrap 4

解决方案

你需要指定你想从this中得到什么，使用$(this).text()来获取innerText，或 $(this).html() 获取innerHtml.

I have a navbar designed in Bootstrap,I want to get the name of the nav-item on which it was clicked. I can set it to active currently but unable to retrieve the name of the nav-item. How to achieve this?

I am aware of the nodeName in jQuery which get the name of the node but I want to get the content inside of that node apparently.

HTML

<div class="collapse animated fadeInLeft" id="navbarNav">
    <ul class="navbar-nav">
        <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li>
        <li class="nav-item"> <a class="nav-link" href="#">Features</a> </li>
        <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li>
        <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li>
    </ul>
</div>

js

$(document).ready(function () {
    "use strict";
    $('ul.navbar-nav > li').click(function (e) {
        e.preventDefault();
        var getItem = $(this);
        $('ul.navbar-nav > li').removeClass('active');
        $(this).addClass('active');
        $(".navbar-brand").after(" <ul class=\"navbar-nav\"><li class=\"nav-item active\"> <a class=\"nav-link\" href=\"#\">" + getItem + "<span class=\"sr-only\">(current)<\/span><\/a> <\/li><\/ul> ");
        $('.navbar-toggler').click();
    });
});

my Current output is [object][object] butI want to get Home if that is currently active or Pricing if that is currently active.

PS:Using Bootstrap 4

解决方案

You need to specify what you want to get from the this, use $(this).text() to get innerText, or $(this).html() to get innerHtml.

这篇关于获取点击它的导航项的名称的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！