html - 事件的非链接导航栏元素

Question

我有一个标准的 Bootstrap 导航栏，看起来像这样:

<nav class="navbar navbar-default">
    <div class="container">
        <ul class="nav navbar-nav">
            <li class="active"><a href='#'>Item 1</a></li>
            <li><a href='#'>Item 2</a></li>
            <li><a href='#'>Item 3</a></li>
            <li><a href='#'>Item 4</a></li>
        </ul>
    </div>
</nav>

网站的当前部分被标记为 active 类并且工作正常。现在我希望导航栏元素 Item 1 在当前页面是 Item 1 链接时不成为链接(因为指向当前页面的链接没有意义) ，但我仍然希望它突出显示为事件页面。问题是，一旦从 li 突出显示中删除 a 元素。

我尝试简单地删除 anchor 标签:

            <li class="active">Item 1</li>

在元素周围放置 p.navbar-text:

            <li class="active"><p class='navbar-text'>Item 1</p></li>

还有一些其他的东西，到目前为止都没有用。

我知道我可以这样做:

            <li class="active"><p class='navbar-text' style='background-color: #e7e7e7; padding: 15px; margin: 0'>Item 1</p></li>

得到我想要的。此外，这似乎有效:

            <li class="active"><a>Item 1</a></li>

但这在语义上是错误的。

是否可以在这种情况下不添加我自己的 CSS 来实现？

Answer 1

据我所知，less files for the navbar仅将此样式应用于 anchor 元素。您可以复制此样式以应用于诸如 span 或 p 之类的内容以供您使用，但默认的 Bootstrap css 无法以其他方式应用此样式。