css onclick导航栏项目更改为活动状态的代码

xzlaal3s 于 2023-02-14 发布在其他

关注(0)|答案(2)|浏览(123)

我需要将导航栏项目的悬停状态更改为单击时的活动状态。我不知道如何编写此 Bootstrap 导航栏的代码，因为我无法真正访问links/。jquery /javascript /php中的任何内容都将很有帮助。
我的HTML代码：

<div class="navbar-inner">

  <ul class="nav 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="#">DETAILS</a>
    </li>

    <li class="nav-item">
      <a class="nav-link" href="#">ABOUT</a>
    </li>

    <li class="nav-item">
      <a class="nav-link" href="#">CONTACT</a>
    </li>

  </ul>

</div>

</nav>

我的CSS代码：
.导航栏{

margin: 10px;

    }

    .navbar.center .navbar-inner
     {

        text-align: center;
    }

    .navbar.center .navbar-inner .nav 
    {

      float: none;
      display:inline-block;
    }
    .navbar .nav > li > a, .navbar .nav > li > a:first-letter,
    .navbar .nav > li.current-menu-item > a, 
    .navbar .nav > li.current-menu-ancestor > a 
    {
      display:        inline;
      color:          white;                        
      font-family:    'Droid Serif', Georgia, Times, serif;
      font-size:      12px;
      padding:        10px;
      font-weight:    bold;
      letter-spacing: 2.5px;
      border: 2px solid transparent;



    }
    .navbar .navbar-nav > li > a:hover,
    .navbar .navbar-nav > li > a:focus 
    {

        border: 2px solid black;
        border-radius: 10px;
        padding: 10px;  


    }

    .navbar-default .navbar-nav > .active > a, 
    .navbar-default .navbar-nav > .active > a:hover, 
    .navbar-default .navbar-nav > .active > a:focus 
    {
        color: white;
        background: black;

        border-radius: 10px;
        padding: 10px;
    }

css

来源：https://stackoverflow.com/questions/37248194/code-for-onclick-navbar-item-changes-to-active-state

2条答案

按热度按时间

a9wyjsp71#

这段代码是用jQuery编写的，我希望这足以让你开始你想用你的导航栏做什么。祝你好运！

//Click event handler for nav-items
$('.nav-item').on('click',function(){

  //Remove any previous active classes
  $('.nav-item').removeClass('active');

  //Add active class to the clicked item
  $(this).addClass('active');
});

赞(0）回复(0）举报 2023-02-14

55ooxyrt2#

这可能是一个老帖子，但我遇到了和您一样的问题，提供的代码片段也不起作用。我找到的解决方案是将代码添加到一个ready（）函数中。注意，我使用了一个<script>标记来包含我的jQuery

$(document).ready(function(){ 

$('.nav-item').on("click", function(){

$('.nav-item').removeClass('active');

$(this).addClass('active');
});
});

赞(0）回复(0）举报 2023-02-14

我来回答

css onclick导航栏项目更改为活动状态的代码

2条答案

相关问题

热门标签

最新问答