Ich erstelle einige HTML-Seiten und möchte, dass der Navigationslink zur aktuellen Seite anders gestaltet ist als die übrigen Links. Meine derzeitige Lösung führt jedoch nicht zum gewünschten Ergebnis.

Das ist mein Code:

<ul>
    <li class="current"><a href="main.html">HOME</a></li>
    <li class="current"><a href="about.html">ABOUT</a></li>
</ul>

Und das CSS:

.current{
   color: #0078fe;
    font-weight: bold;
}

a:hover {
    color: white;
}

a:active {
    color: #0078fe;
}

Dies hat jedoch folgende Ergebnisse:

Zuhause:

home page

Über:

about page

Wie kann ich den richtigen Link zur aktuellen Seite mit dem current -Stil formatieren, ohne ihn auf die anderen Links anzuwenden?

3
virus-distribution-center 7 Feb. 2020 im 21:43

3 Antworten

Beste Antwort

Das Standard-Styling des Benutzeragenten (Browsers) für den Link selbst (das a -Element) überschreibt Ihre Stile, da die Linkstile des Benutzeragenten eine höhere Spezifität für das tatsächlich gestaltete Element aufweisen, als Ihr {{ Die Auswahl X1}} wählt das Listenelement aus, das das übergeordnete Element des Links ist, und wendet nur einige Stile durch Vererbung auf ihre untergeordneten Elemente an.

Wenn der Link nur im Status active fett gedruckt werden soll, muss der Selektor für die Schriftgröße property changed on the aktiv sein, wie ich es in den folgenden Beispielen getan habe.

Was Sie tun möchten, ist, den Links selbst (den a Elementen) eine Klasse zu geben und die Eigenschaften auf diese zu setzen. Könnte einen Klassennamen wie .nav-link verwenden. Ich gehe davon aus, dass .current nur auf dem Link für die aktuelle Seite stehen soll. So was:

<ul>
    <li><a class="nav-link current" href="#">HOME</a></li>
    <li><a class="nav-link" href="about.html">ABOUT</a></li>
</ul>
.nav-link {
   color: #0078fe;
}

.nav-link:hover {
   color: #fff;
}

.nav-link:active {
   color: #0078fe;
   font-weight: bold;
}

Wenn Sie .current als Klasse für den Link der aktuellen Seite gemeint haben, auf der sich der Benutzer befindet, können Sie auch den Selektor :not() verwenden, um die Zustände hover und active beizubehalten Anwendung auf den "Link" für die aktuelle Seite, die mit der Klasse .current. Wie so:

.nav-link {
   color: #0078fe;
}

.nav-link:not(.current):hover {
   color: #fff;
}

.nav-link:not(.current):active {
   color: #0078fe;
  font-weight: bold;
}

Obwohl es besser ist, Selektoren einfach zu halten und nur eine Klasse auf alle a Elemente wie oben anzuwenden, können Sie alternativ weiterhin eine Klasse für jedes li Element haben und dann einen Nachkommen-Kombinationsselektor verwenden.

<ul>
    <li class="nav-link current"><a href="#">HOME</a></li>
    <li class="nav-link"><a href="about.html">ABOUT</a></li>
</ul>
.nav-link > a {
   color: #0078fe;
}

.nav-link > a:hover {
   color: #fff;
}

.nav-link > a:active {
  color: #0078fe;
  font-weight: bold;
}

🚨 BEARBEITEN 🚨

Es sieht so aus, als ob Sie tatsächlich darum bitten, einen Link in einem Navi anders zu gestalten, wenn Sie sich auf der Seite befinden, für die der Link bestimmt ist. Sie tun dies, indem Sie eine Klasse auf den Link für die Seite anwenden, auf der Sie sich befinden, wie ich es oben getan habe, indem Sie die Klasse '.current' verwenden. Der : active state hat damit nichts zu tun. und ich denke, warum ich und andere dich anfangs nicht verstanden haben. Was Sie tun möchten, ist Folgendes:

<ul>
    <li><a class="nav-link current" href="#">HOME</a></li>
    <li><a class="nav-link" href="about.html">ABOUT</a></li>
</ul>
.nav-link {
   color: #0078fe;
}

.nav-link:not(.current):hover {
   color: #fff;
}

.nav-link:not(.current):active {
   color: #0078fe;
}

.current {
  font-weight: bold;
}

Hier haben Sie die nav-link Klassen auf den tatsächlichen a Elementen selbst, die aktuelle Seite erhält auch die current Klasse auf ihrem Link. Sie legen die Farbe für den Link sowie den aktuellen und den aktiven Status fest, während Sie verhindern, dass der aktuelle Link den Hover / Active-Status mithilfe der Kombinationsauswahl not() erhält. Schließlich sagen wir, dass alles mit der Klasse .current fett gedruckt wird. Fügen Sie einfach den Selektor current zum HTML-Code des jeweiligen Links jeder Seite hinzu. Wenn es sich um eine Einzelseitenanwendung handelt, können Sie die Klasse mit JavaScript anwenden, wenn auf einen Link geklickt wird. Wenn Sie weitere Fragen haben, lassen Sie es mich einfach wissen!

1
Stephen M Irving 7 Feb. 2020 im 19:52

Stil auf Ankertag anwenden. wie .active a. Weisen Sie auf der Startseite der Klasse .active zu

<li><a class="active" href="main.html">Home</a></li> und auf ungefähr Seite .active Klasse <li><a class="active" href="about.html">About</a></li> zuweisen

.current a{
   color: #0078fe;
   font-weight: bold;
}

a:hover {
   color: white;
}

a:active {
   color: #0078fe;
}
<ul>
    <li class="current"><a href="main.html">HOME</a></li>
    <li><a href="about.html">ABOUT</a></li>
</ul>
0
waqas Mumtaz 7 Feb. 2020 im 19:01

Wenn Sie dem Link zu der Seite, auf der Sie sich gerade befinden, ein Styling zuweisen möchten, müssen Sie ermitteln, auf welcher Seite Sie sich gerade befinden, und dies mit dem Attribut href jedes a -Tags vergleichen und angeben Der Klassenname current für denjenigen, dessen href mit dem Seitenort (URL) übereinstimmt. Dies kann nicht allein mit CSS erfolgen.

Serverseitiges Rendern

Wenn Sie serverseitiges Rendering (oder nur statische HTML-Seiten) verwenden, können Sie nur die CSS-Klasse current an den richtigen Link setzen.

In main.html haben Sie also:

<ul>
    <li class="current"><a href="main.html">HOME</a></li>
    <li><a href="about.html">ABOUT</a></li>
</ul>

Und in about.html haben Sie:

<ul>
    <li><a href="main.html">HOME</a></li>
    <li class="current"><a href="about.html">ABOUT</a></li>
</ul>

Client-seitiges Rendern

Wenn Sie clientseitiges Rendering verwenden (oder nach einer dynamischeren, weniger manuellen Lösung suchen), können Sie den Pfad der aktuellen Seite erkennen und dann die CSS-Klasse current rechts {{X1} festlegen. } Tag mit JavaScript.

Hinweis für diese Lösung, ich würde empfehlen, die Klasse current direkt auf die a zu setzen (anstatt auf die li), aber Sie können dies ziemlich einfach umgehen.

Beispielsweise:

const currentPathname = document.location.pathname;

const links = document.querySelectorAll("a");

links.forEach(link => {
    if (link.pathname == currentPathname) {
        link.classList.add("current");
    } else {
        link.classList.remove("current"); // possibly optional
    }
})

Ein funktionierendes Beispiel:

const currentPathname = document.location.pathname;

const links = document.querySelectorAll("a");

links.forEach(link => {
    if (link.pathname == currentPathname) {
        link.classList.add("current");
    } else {
        link.classList.remove("current"); // possibly optional
    }
})
a.current {
  font-weight: bold;
}
<ul>
    <li><a href="/js">This Page</a></li>
    <li><a href="/">Another Page</a></li>
</ul>
1
Henry Woody 7 Feb. 2020 im 19:40