Проверяем сайт и затем определяемся со стилем CSS?

StackOverflow https://stackoverflow.com/questions/616902

  •  03-07-2019
  •  | 
  •  

Вопрос

Я стремлюсь к тому, чтобы вверху была такая же панель, как здесь: http://www.keltainenporssi.fi/ Текущий сайт окрашен в красный цвет, в то время как другие сайты - в черный.

Как бы вы достигли моей цели?Может быть, с помощью php?

Синтаксис в псевдокоде может быть следующим

if $site = A
    use-styleA
if $site = B
    use-styleB
else
    use-FinalStyle
Это было полезно?

Решение

Нединамический подход:

Вы можете использовать правило CSS для каждого сайта, например:

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

Другие советы

Обычно для этого используется серверный скрипт, такой как PHP. Например: 

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

?>

Это приведет к выводу наподобие (отформатировано для удобства чтения) 

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

У вас может быть один CSS для панели, которую будут получать все домены. Удостоверьтесь, что вы добавили! Важные правила к этому CSS, чтобы эти правила не были переопределены ничем другим. В противном случае защитите панель в «пространстве имен»; добавив идентификатор в список / div или что вы будете использовать для его реализации.

Да, вы можете назначить класс элемента привязки на основе текущего сайта.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top