Vérification du site et choix du style CSS?

Question

Je vise à avoir une barre similaire en haut comme ici: http://www.keltainenporssi.fi/ La couleur du site actuel est en rouge, tandis que les autres sites sont en noir.

Comment atteindriez-vous mon objectif? Peut-être par php?

La syntaxe en pseudo-code peut être

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

Answer 1

approche non-dynamique:

Vous pouvez utiliser une règle CSS pour chaque site, comme ceci:

/* 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

Vous pouvez avoir un seul pour la barre css que tous les domaines seront FETCH. Assurez-vous d'ajouter des règles importantes sur ce CSS afin que ses règles ne soient pas remplacées par quoi que ce soit d'autre. Sinon, protégez la barre dans un "espace de nommage" en ajoutant un identifiant sur la liste/div ou tout ce que vous utiliserez pour l'implémenter.

Answer 3

Il est courant d'utiliser un script côté serveur tel que PHP pour faire une telle chose. Par exemple:

<?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>'; 

?> 

Cela produirait une sortie comme: (Formaté pour la lisibilité)

<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

Oui, vous pouvez affecter la classe de l'élément d'ancrage basé sur le site actuel.