it-swarm.com.de

Wie kann man die Farbe des aktiven Links in Bootstrap-CSS ändern?

Ich verwende joomla 3 und bootstrap.min.js Ich erstelle ein Menü und gebe spezielle Klassen, um Schwebeflug, aktive Links und den Stil des Menüs zu ändern Farbe des Menüs. Angenommen, ich habe 2 Menüs. Zuhause und Kontakt .. Wenn ich zu Hause bin, ist es rot. Ich möchte diese Farbe ändern. Ich könnte a: active und a: hover ändern. .__ Hier ist der Code;

.topmenu .active a,
.topmenu .active a:hover {
    background-color: white;
}
.topmenu > li > a{
    color: orange;
    font-weight:bold;
}
.topmenu > li > a:hover {
    color: black;
    background:white;
} 

Sogar ich habe div benutzt, um die Farbe des aktiven Links zu ändern ... Hier ist der Code 

#top-menu a{
background-color: white;
color: orange;
font-weight:bold;
}
#top-menu a:focus
{
    color: orange;
}
#top-menu a:hover{
    color: black;
}

Jedes Mal, wenn ich auf Home klicke, wird es aktiviert und die Farbe ist rot. Was ich in Orange ändern möchte. Kann nicht finden, wie es geht. 

Hier ist mein Auszeichnungscode

<div id="top-menu">
<ul class="nav menu nav-pills topmenu">
<li class="item-109 current active"><a href="/joomla3/">Home</a></li>
<li class="item-138"><a href="/joomla3/?Itemid=138"> Russian </a></li>
<li class="item-110"><a href="/joomla3/?Itemid=110"></a></li></ul>
</div>

Was schlagen Sie vor?

10

Schließlich habe ich mit Experimenten herausgefunden, wie ich es einfangen kann.

#top-menu .current a
{
    color: orange !important;
}

Vielen Dank an alle für Ihre Zeit und Hilfe. Vielen Dank!

10

Ich empfehle Ihnen, lokal einen ID (#)-Selektor für die Div zu erstellen, der die a-Links enthält. Nehmen Sie dann den id-Namen in Ihr Stylesheet und überschreiben Sie die vorhandene Regel.

Zum Beispiel,

#abc a{xxx:xxx;}
#abc a:active{xxx:xxx;}

Hoffe das hilft.

6
Nitesh

Um das zu tun, was Sie versuchen, müssen Sie zuerst a: hover müssen kommen nach a: link und a: visit in der CSS-Definition sein, um wirksam zu sein. Wenn sie nicht in dieser Reihenfolge sind, funktionieren sie nicht.

Zweitens müssen Sie verstehen, dass die Farbe des aktuellen Links, auf der der Endbenutzer sich befand, falsch ist, wenn Sie (a: active) denken. (a: aktiv) ändert die Farbe, wenn Sie auf den Link klicken. Sie können dies testen, indem Sie die Maustaste auf dem Link, den Sie mit (a: active) geändert haben, gedrückt halten.

Wenn Sie dies nur mit CSS versuchen, müssen Sie dem aktuellen Link eine bestimmte Klasse hinzufügen </ li> dass der Endbenutzer eingeschaltet ist. Unten habe ich Ihnen ein Beispiel hinterlassen, hoffe das hilft :)

Ihre Navigationsleiste wie folgt
-Zuhause
-Russland
-Italien

Wir sind auf der Italien-Seite für dieses Beispiel:

/*YOUR CSS SHOULD LOOK LIKE THIS*/

/* unvisited link grey */
#top-menu a:link {
	color: #777;
}
/* visited link grey */
#top-menu a:visited {
	color: #777;
}
/* mouse over link blue */
#top-menu a:hover {
	color: #0CF;
}
/* selected link blue */
#top-menu a:active {
	color: #0CF;
}
/* !IMPORTANT ONLY ADD THIS CLASS TO YOUR ACTIVE PAGE LINK ( Color Blue )*/
.activePage a {
	color: #0CF !important
}
<div id="top-menu">
  <ul class="nav menu nav-pills topmenu">
    <li><a href="http://yourdomain.com/page1.html">Home</a></li>
    <li><a href="http://yourdomain.com/page2.html">Russian</a></li>
    <li class="activePage"><a href="http://yourdomain.com/page3.html">Italy</a></li><!--Page End User Is On-->
    <!--Look UP ^^^^^^^^ Hope this helps :)-->
  </ul>
</div>

Beachten Sie, dass ich das .activePage-Tag nicht in die anderen Links eingefügt habe. Dies bedeutet, dass Ihre ursprünglichen Farben, die Sie in Ihrem CSS für die Navigationsleiste ausgewählt haben, weiterhin ausgeführt werden können, während die aktive Seite in einer anderen Farbe angezeigt wird.

Der Grund, warum dies funktioniert hat, ist, dass ich! Wichtig am Ende der Farbe für diese separate Klasse hinzugefügt habe.

.activePage {
  color: #0CF !important
}
Wenn Sie diese Technik auf Ihre anderen Seiten anwenden möchten, würde sie einfach so aussehen:

Startseite

/*YOUR CSS SHOULD LOOK LIKE THIS*/

/* unvisited link grey */
#top-menu a:link {
	color: #777;
}
/* visited link grey */
#top-menu a:visited {
	color: #777;
}
/* mouse over link blue */
#top-menu a:hover {
	color: #0CF;
}
/* selected link blue */
#top-menu a:active {
	color: #0CF;
}
/* !IMPORTANT ONLY ADD THIS CLASS TO YOUR ACTIVE PAGE LINK ( Color Blue )*/
.activePage a {
	color: #0CF !important
}
<div id="top-menu">
  <ul class="nav menu nav-pills topmenu">
    <li class="activePage"><a href="http://yourdomain.com/page1.html">Home</a></li>
    <li><a href="http://yourdomain.com/page2.html">Russian</a></li>
    <li><a href="http://yourdomain.com/page3.html">Italy</a></li>
  </ul>
</div>
Ich hoffe, ich habe Ihnen eine solide Antwort auf Ihre Frage gegeben, weil ich es hasse, wenn ich überall im Web schaue und die Antwort, die ich suche, nicht wirklich finden kann. 

5

Um die aktuelle Farbe des aktiven Links zu ändern, können Sie Code in einer externen CSS-Datei oder inline CSS verwenden

.active a
{
background-color:#ff0000;
}
3
Ranvir gorai

Wenn Sie die Linkfarben global ändern möchten (oder so ziemlich alles andere), erstellen Sie einen benutzerdefinierten Download: http://Twitter.github.io/bootstrap/customize.html

Wenn Sie das bereitgestellte CSS überschreiben möchten, müssen Sie als Antwort auf Ihren Kommentar eine spezifischere Regel erstellen. Erstellen Sie also entweder einen Selektor wie #my-custom-container .item-109 .current .active oder fügen Sie Ihren Regeln einen !important für .item-109 .current .active hinzu.

1
Tieson T.
// Fix navigation menu active links
$(document).ready(function(){
    var path = window.location.pathname,
        link = window.location.href
    ;
    $('a[href="'+path+'"], a[href="'+link+'"]').parent('li').addClass('active');
});
1
user3552895
        $(function (){
            $('nav ul li a.sub-menu').each(function(){
                var path = window.location.href;
                var current = path.substring(path.lastIndexOf('/')+1);
                var url = $(this).attr('href');
                if(url == current){
                    $(this).addClass('active');
                };
            });     
        });
0
Anbarasan

Ändern Sie Ihr CSS in .item-109 { color: white !important; }.

Hier ist ein Link mit weiteren Informationen zu !important .

0
Jhawins