Question

我的active课程未在<li>之间切换，我不知道为什么......以下是我的代码片段：

.active {
  background: #ef5b00;
  color: #FFF;
}

<head>
  <meta charset="utf-8">
  <title>Test</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="master.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="wrapper">
    <nav class="sidebar" id="sidebar-id">
      <div class="sidebar-header">
        <h3>Test</h3>
      </div>
      <!-- end sidebar header -->
      <ul class="list-unstyled nav components">
        <li class="active"><a href="#"><i class="glyphicon glyphicon-home"></i>Home</a></li>
        <li><a href="#"><i class="glyphicon glyphicon-briefcase"></i>About</a></li>
        <li><a href="#"><i class="glyphicon glyphicon-duplicate"></i> Pages</a></li>
        <li><a href="#"><i class="glyphicon glyphicon-link"></i>Portfolio</a></li>
        <li><a href="#"><i class="glyphicon glyphicon-send"></i>Contact</a></li>
      </ul>
      <!-- end sidebar links -->
    </nav>
    <!-- end sidebar -->
    <script type="text/javascript">
      $(".nav li").click(function() {
        if ($(".nav li").hasClass("active")) {
          $(this).removeClass("active");
        } else {
          $(this).addClass("active");
        }
      });
</script>
</body>

正如您所看到的，点击的链接确实有点灰色但是“橙色”active类不会被转移。

我认为我的css不正确，因为我确实认为这是由bootstarp管理的，但我不确定我做错了什么。

Answer 1

- ＆GT;请在您的客户js中添加以下js

＆＃13;

$(document).ready(function(){
  $('ul li').click(function(){
    $('li').removeClass("active");
    $(this).addClass("active");
});
});

＆＃13;

.sidebar ul .active {
  background: #ef5b00;
  color: #FFF;
}

＆＃13;

<head>
  <meta charset="utf-8">
  <title>Test</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="master.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="wrapper">
    <nav class="sidebar" id="sidebar-id">
      <div class="sidebar-header">
        <h3>Test</h3>
      </div>
       <!--end sidebar header--> 
      <ul class="list-unstyled nav components">
        <li><a href="#"><i class="glyphicon glyphicon-home"></i>Home</a></li>
        <li><a href="#"><i class="glyphicon glyphicon-briefcase"></i>About</a></li>
        <li><a href="#"><i class="glyphicon glyphicon-duplicate"></i> Pages</a></li>
        <li><a href="#"><i class="glyphicon glyphicon-link"></i>Portfolio</a></li>
        <li><a href="#"><i class="glyphicon glyphicon-send"></i>Contact</a></li>
      </ul>
      <!-- end sidebar links -->
    </nav>
    <!-- end sidebar -->
  </div>
</body>

＆＃13;

Answer 2

您需要一个JS代码才能将该活动类从一个li移动到另一个li。请参阅以下

.sidebar ul .active {
  background: #ef5b00;
  color: #FFF;
}

<head>
  <meta charset="utf-8">
  <title>Test</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="master.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="wrapper">
    <nav class="sidebar" id="sidebar-id">
      <div class="sidebar-header">
        <h3>Test</h3>
      </div>
      <!-- end sidebar header -->
      <ul class="list-unstyled nav components">
        <li class="active"><a href="#"><i class="glyphicon glyphicon-home"></i>Home</a></li>
        <li><a href="#"><i class="glyphicon glyphicon-briefcase"></i>About</a></li>
        <li><a href="#"><i class="glyphicon glyphicon-duplicate"></i> Pages</a></li>
        <li><a href="#"><i class="glyphicon glyphicon-link"></i>Portfolio</a></li>
        <li><a href="#"><i class="glyphicon glyphicon-send"></i>Contact</a></li>
      </ul>
      <!-- end sidebar links -->
    </nav>
    <!-- end sidebar -->
    <script>
      $('.components li').click(function(){
          $('.components li').removeClass('active');
          $(this).addClass('active');
          $(this).find('a').blur()
      })
    </script>
</body>

Answer 3

这是因为活动类在单击时没有移动到任何其他li（添加jQuery代码）

如下所示： -

$(document).ready(function(){
 $('li').click(function(){
  $('li').removeClass('active');
  $(this).addClass('active');
  $(this).find('a').blur(); // to stop link hover CSS effect imidiattly (first-time)
 });
});

.sidebar ul li.active {
  background: #ef5b00;
  color: #FFF;
}

<head>
  <meta charset="utf-8">
  <title>Test</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="master.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="wrapper">
    <nav class="sidebar" id="sidebar-id">
      <div class="sidebar-header">
        <h3>Test</h3>
      </div>
      <!-- end sidebar header -->
      <ul class="list-unstyled nav components">
        <li class="active"><a href="#"><i class="glyphicon glyphicon-home"></i>Home</a></li>
        <li><a href="#"><i class="glyphicon glyphicon-briefcase"></i>About</a></li>
        <li><a href="#"><i class="glyphicon glyphicon-duplicate"></i> Pages</a></li>
        <li><a href="#"><i class="glyphicon glyphicon-link"></i>Portfolio</a></li>
        <li><a href="#"><i class="glyphicon glyphicon-send"></i>Contact</a></li>
      </ul>
      <!-- end sidebar links -->
    </nav>
    <!-- end sidebar -->
</body>

活动类不受Bootstrap管理

3 个答案: