Wie wird die Seitenleiste aktiviert?

Question

Ich habe eine Seitenleiste mit der Verwendung von Bootsrap CSS, aber die Klasse = "aktiv" funktioniert nicht.

Hier ist die Registerkarte Hinzufügen standardmäßig nicht aktiv. Könnten Sie bitte lassen Sie mich wissen, wie standardmäßig aktiv hinzufügen zu machen, wenn sie unter Arbeits Link 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>

finden Sie mit: enter link description here

Answer 1

Sie müssen es wissen lassen, wie Sie es möchten sehen, sobald es aktiv ist. Und du brauchst eine kleine Jquery, um das aktive Tauschen für dich zu machen.

So, hier habe ich die Jquery hinzugefügt habe ich gestylt li.active (I auch Stil li ein wenig so konnte ich uns das unterstrichenen Beispiel)

Ihre html obwohl das gleiche ist.

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

Answer 2

ich überprüfen Sie den Code, und fügte einige Klassen . check das aus. 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; 
}