skip to Main Content

I have a side bar using Bootsrap CSS, but the class=” active” does not work.

Here , the tab Add is not active by default.
Could you please let me know how to make Add active by default when using class="nav nav-sidebar"

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="col-sm-3 col-md-2 sidebar">
  <ul class="nav nav-sidebar">
    <li class="active"><a href="#">Add </a></li>
    <li><a href="#">View/Modify</a></li>
    <li><a href="#">Delete</a></li>
  </ul>
</div>

Please find below working link:
enter link description here

2

Answers


  1. I check your code and added some classes. check this out. DEMO here!

    HTML:

     <div class="col-sm-3 col-md-2 sidebar">
      <ul class="nav nav-sidebar list-group">
        <li class="list-group-item active"><a href="#">Add </a></li>
        <li class="list-group-item"><a href="#">View/Modify</a></li>
        <li class="list-group-item"><a href="#">Delete</a></li>
      </ul>
    </div>
    

    CSS:

        li.list-group-item a:hover {
      background-color: transparent;
    }
    
    li.list-group-item.active a {
      color: #fff;
    }
    
    li.list-group-item.active a:hover {
      background-color: transparent;
    }
    
    .list-group-item.active, .list-group-item.active:focus, .list-group-item.active:hover {
      background-color: #a8a8a8;
    }
    
    Login or Signup to reply.
  2. You have to let it know how you’d like it to look once it’s active. And you need a little jquery to do the active swapping for you.

    So here I’ve added the jquery, I’ve styled li.active (I also styles li a little so I could us the underline example)

    Your html is the same though.

    $(".nav a").on("click", function() {
      $(".nav").find(".active").removeClass("active");
      $(this).parent().addClass("active");
    });
    .nav li {
      border-bottom: 3px solid rgba(0, 0, 0, 0);
    }
    .nav li:hover {
      border-bottom: 3px solid #eee;
    }
    .nav li.active {
      border-bottom: 3px solid #338ecf;
      background: #eee
    }
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <div class="col-sm-3 col-md-2 sidebar">
      <ul class="nav nav-sidebar">
        <li class="active"><a href="#">Add </a>
        </li>
        <li><a href="#">View/Modify</a>
        </li>
        <li><a href="#">Delete</a>
        </li>
      </ul>
    </div>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search