Активный без ссылка Navbar вещь

Question

У меня есть стандартный загрузочный Navbar, который выглядит следующим образом:

<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 класса, и это работает отлично. Теперь я хочу, чтобы элемент navbar Item 1 не был ссылкой, когда текущая страница является ссылкой Item 1 (поскольку ссылка, которая указывает на текущую страницу, не имеет смысла), но я все же хочу, чтобы она была выделена как активная страница. Проблема заключается в том, что как только элемент удаления a из выделения li.

Я попытался просто сбросив якорь тег:

  <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. Вы можете скопировать этот стиль, чтобы применить к таким вещам, как span или p для вашего использования, но нет никакого способа использовать css для начальной загрузки, чтобы это применимо в противном случае.