Website überprüfen und dann CSS-Stil entscheiden?

Question

Ich möchte eine ähnliche Bar an der Spitze wie hier haben: http://www.keltainenporssi.fi/ Die Farbe der aktuellen Seite ist in rot, während andere Seiten in schwarz sind.

Wie erreichen Sie mein Ziel? Vielleicht per PHP?

Die Syntax in Pseudo-Code kann ein einzelnes CSS für die Bar haben können

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

Answer 1

Nicht dynamischen Ansatz:

Sie können eine CSS-Regel für jede Website verwenden, etwa 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

Sie die alle Domänen holen werden. Stellen Sie sicher, dass Sie wichtige Regeln für diese CSS hinzufügen, damit ihre Regeln nicht durch andere überschrieben werden. Ansonsten schütze die Leiste in einem "Namespace", indem du eine ID in der Liste/div hinzufügst oder was auch immer du verwenden wirst, um sie zu implementieren.

Answer 3

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 erzeugen eine Ausgabe wie: (zur besseren 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 4

Ja, Sie Ankerelement der Klasse zuweisen könnte der aktuellen Website basiert.