Überprüfen Sie die Seite und entscheiden Sie dann den CSS -Stil?

Question

Ich möchte eine ähnliche Bar oben wie hier haben: http://www.keltainenporsi.fi/Die Farbe der aktuellen Stelle ist rot, während andere Standorte schwarz sind.

Wie würdest du mein Ziel erreichen? Vielleicht von PHP?

Die Syntax in Pseudo-Code kann sein

if $site = A
    use-styleA
if $site = B
    use-styleB
else
    use-FinalStyle

Answer 1

Nicht-dynamischer Ansatz:

Sie können für jede Website eine CSS -Regel verwenden, wie SO:

/* site-one.css */
#top-nav li.site-one a {
    color: red;
}

/* site-two.css */
#top-nav li.site-two a {
    color: red;
}

/* site-three.css */
#top-nav li.site-three a {
    color: red;
}

HTML:

<ul id="top-nav">
    <li class="page-one"><a href="pages/one">Page one</a></li>
    <li class="page-two"><a href="pages/two">Page two</a></li>
    <li class="page-three"><a href="pages/three">Page three</a></li>
</ul>

Answer 2

Es ist üblich, ein serverseitiges Skript wie PHP zu verwenden, um so etwas zu tun. Zum Beispiel:

<?PHP

echo '<ul id="top-nav">';

foreach($page as $pageId => $text) {
    echo '<li';
    if($curPage == $pageId)
        echo ' class="active"';
    echo '>';
    echo '<a href="pages/' . htmlspecialchars($pageId) . '">';
    echo htmlspecialchars($text);
    echo '</a>';
    echo '</li>';
}

echo '</ul>';

?>

Dies würde eine Ausgabe erzeugen wie: (Zur Lesbarkeit formatiert)

<ul id="top-nav">
    <li><a href="pages/home">Home</a></li>
    <li class="active"><a href="pages/one">Page one</a></li>
    <li><a href="pages/two">Page two</a></li>
</ul>

Answer 3

Sie können ein einzelnes CSS für die Stange haben, die alle Domänen abrufen werden. Stellen Sie sicher, dass Sie für dieses CSS hinzufügen! Wichtige Regeln für dieses CSS, damit die Regeln von nichts anderem überschrieben werden. Andernfalls schützen Sie die Leiste in einem "Namespace", indem Sie eine ID auf der Liste/DIV oder alles, was Sie verwenden, um sie implementieren zu können.

Answer 4

Ja, Sie können die Klasse des Ankerelements basierend auf der aktuellen Site zuweisen.