CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
CBreeze
CBreeze

Reputation: 2965

Active class not being managed by Bootstrap

My active class is not switching between <li> and I'm not sure why.. Here is a snippet of my code:

.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>

As you can see the clicked links do go a shade of Gray however the 'Orange' active class does not get transferred.

I assume my css is incorrect because I do believe this is managed by bootstarp now however I am unsure of what I am doing wrong.

Upvotes: 1

Views: 259

Answers (3)

Dharmesh Vekariya
Dharmesh Vekariya

Reputation: 1146

--> Please add following js in your custome js

$(document).ready(function(){
  $('ul li').click(function(){
    $('li').removeClass("active");
    $(this).addClass("active");
});
});
.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><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>

Upvotes: 1

Death-is-the-real-truth
Death-is-the-real-truth

Reputation: 72299

it's because active class not moved to any other li when they clicked (add jQuery code)

Do like below:-

$(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>

Upvotes: 0

Vipin Kumar
Vipin Kumar

Reputation: 6546

You need a JS code to move that active class from one li to another. Please see following

.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>

Upvotes: 0

Related Questions