Ich habe eine Navbar, in der ich die .active Farbe nicht wirklich sehen kann, da ich ein Third Party Theme verwende, das ich wirklich mag, aber aber ich habe ein Problem mit dem Thema. Ich kann nicht richtig sehen, welche meiner Navbar-Objekte gerade aktiv sind. Daher möchte ich dem .active-Element eine Hintergrundfarbe hinzufügen.Bootstrap ändern navbar .active Hintergrundfarbe

index.html

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Test</title> 
    <meta charset="utf-8"> 
    <!-- MOBILE FIRST --> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <!-- BOOTSTRAP --> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
    <!-- jQuery library --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
    <!-- Latest compiled JavaScript --> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 

    <!-- THEMES --> 
    <!-- <link href="css/theme_black.min.css" rel="stylesheet"> --> 
    <!-- <link href="css/theme_white.min.css" rel="stylesheet"> --> 

    <!-- HOMEMADE - these files are local --> 
    <!-- <script src="js/functions.js"></script> --> 
    <!-- <link href="css/custom_style.css" rel="stylesheet"> --> 
</head> 
<body> 
<header id="header" class="header clearfix no-padding"> 
    <nav class="navbar navbar-default navbar-static-top"> 
    <div class="container"> 
     <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">Test</a> 
     </div> 
     <div class="collapse navbar-collapse no-padding"> 
     <ul class="nav navbar-nav pull-right" id="navigator"> 
      <li id="home"><a class="border" href="#">Home</a></li> 
      <li id="about"><a class="border" href="#">About</a></li> 
      <li id="cv"><a class="border" href="#">CV</a></li> 
      <li id="contact"><a class="border" href="#">Contact</a></li> 
     </ul> 
     </div> 
    </div> 
    </nav> 
</header> 
</body>

ich den folgenden Code in meinem Javascript bin mit dem .active Artikel die

functions.js ändern

$('#nav li a').click(function() { 
    $('#nav li').removeClass(); 
    $($(this).attr('href')).addClass('active'); 
});

will ich jedoch ändern Hintergrund des aktiven Elements, und ich habe versucht, ein paar verschiedene Lösungen in meinem CSS, aber keiner von ihnen funktioniert wie vorgesehen.

custom_style.css

.no-margin { 
    margin: 0; 
} 

.no-padding { 
    padding: 0; 
} 

//some sort of .active { 
// background-color: blue; 
//}

EDIT:

Jetzt mit einer Geige: https://jsfiddle.net/819qbftg/2/

Quelle

2016-03-19 Zeliax

Können Sie bitte einen Startpunkt im Code hinzufügen (z. B. einen CodePen oder JSFiddle). – Roy

Ich versuche das gerade. Jedoch habe ich Probleme, meine bootstrap.min.js- und bootstrap.min.css-Dateien enthalten .. (Es scheint nicht zu akzeptieren, da sie "http" Links und nicht "https". Jede Idee, wie Sie das beheben? – Zeliax

Nvm Ich habe eine Lösung gefunden .. Fiddle kommt in zwei Sekunden .. – Zeliax

Um das zu erreichen, was Sie wollen, können Sie zwei Dinge zu tun haben, stellen Sie sicher, dass Sie den richtigen Artikel adressieren mit JavaScript und überschreiben Sie den Standard-Stil, der von der Bootstrap CSS festgelegt wurde.

JavaScript (jQuery)

var selector = '.nav li'; 

$(selector).on('click', function(){ 
    $(selector).removeClass('active'); 
    $(this).addClass('active'); 
});

Sie wurden Adressieren der #nav, aber in Ihrem HTML, gab es nur eine Klasse mit nav, keine ID. Fügen Sie die Klasse auch nicht dem Attribut href hinzu.

Dieser JS-Code entfernt zunächst .active von allen Selektoren (.nav li), bevor er erneut auf das Element gesetzt wird, auf das geklickt wurde.

Styling hinzugefügt

.navbar-default .navbar-nav>.active> a, 
.navbar-default .navbar-nav>.active> a:focus, 
.navbar-default .navbar-nav>.active> a:hover { 
    background: red; /* Anything you want */ 
}

Siehe this JSFiddle für eine Demo.

Quelle

2016-03-19 18:09:17 Roy

Hervorragende Antwort Sie haben auch meinen Fehler mit dem Bezeichner ("#") im Javascript korrigiert. – Zeliax

außer Kraft setzen diese Stile ...

<style> 
    .navbar-default .navbar-nav>li>a:focus { color: #DD0000; } 
    .navbar-default .navbar-brand:focus { color: #DD0000; } 
</style>

nahm ich die Dateien oben und setzen diesen Stil-Tag am unteren Rand des <head>. Scheint zu tun, was du verlangst. Normalerweise mache ich das in einem separaten CSS für die Seite, die zuletzt in deinen CSS-Links enthalten ist.

Quelle

2016-03-19 18:09:49

Bootstrap ändern navbar .active Hintergrundfarbe

index.html

functions.js ändern

custom_style.css

EDIT:

Antwort

Verwandte Themen