Как установить цвет фона для ссылок?

Question

Я пытался выяснить, как установить текущую страницу на другой цвет фона, чем другие ссылки, но безрезультатно.

HTML

<div id="navigation"> 
    <ul> 
     <li><a href="<?php echo base_url() ?>index.php/home">Home</a></li> 
     <li><a href="<?php echo base_url() ?>index.php/portfolio">Portfolio</a></li> 
     <li><a href="<?php echo base_url() ?>index.php/about">About</a></li> 
     <li><a href="<?php echo base_url() ?>index.php/gallery">Gallery</a></li> 
     <li><a href="<?php echo base_url() ?>index.php/blog">Blog</a></li> 
    </ul> 
</div> 

То, что я хочу, чтобы установить текущую активную ссылку на черный, а остальные четыре ссылки на серый. Таким образом, если я посещу Портфолио, например, эта ссылка черная, а остальные - серые. Как мне это сделать?

Answer 1

К счастью, Javascript не задействован. HTML и CSS отлично справятся с этой задачей. Прежде всего, давайте создадим ваш HTML. Вы, очевидно, знаете, на какой странице вы находитесь, поэтому мы добавим класс к ссылке текущей страницы. Так, например, если бы мы были на /index.php/home, наша разметка может выглядеть примерно так.

<div id="navigation"> 
    <ul> 
     <li><a class="current" href="<?php echo base_url() ?>index.php/home">Home</a></li> 
     <li><a href="<?php echo base_url() ?>index.php/portfolio">Portfolio</a></li> 
     <li><a href="<?php echo base_url() ?>index.php/about">About</a></li> 
     <li><a href="<?php echo base_url() ?>index.php/gallery">Gallery</a></li> 
     <li><a href="<?php echo base_url() ?>index.php/blog">Blog</a></li> 
    </ul> 
</div> 

Теперь, прежде чем окрашивать ссылку тока мы будем окрашивать остальные ссылки. Мы можем выбрать остальные ссылки через CSS так.

#navigation a { 
} 

Следующий CSS подберет все <a> элементы, которые являются дочерними navigation элемента. Теперь нам нужно установить цвет фона. Свойство CSS для установки цвета фона - background-color: xxx. Где xxx - либо шестнадцатеричный код, значение rgb, либо имя цвета. Поэтому мы будем делать следующее, чтобы все ссылки были серыми.

#navigation a { 
    background-color: #333; /* or whatever grey you want. */ 
} 

Это установит каждую ссылку на цвет серый. Теперь, мы должны установить текущий ссылки на цвет черный.

Если вы заметили, мы добавили class="current" к текущей ссылке, : Ссылка в этом случае. Затем нам нужно создать соответствующий стиль для этого. Наша CSS-декларация будет выглядеть примерно так.

#navigation .current { 
} 

Вышеуказанное заявление относится ко всем элементам с классом current, который является потомком элемента navigation. Итак, теперь мы устанавливаем цвет фона так.

#navigation .current { 
    background-color: #000; 
} 

Итак, наш окончательный CSS будет выглядеть так.

#navigation a { 
    background-color: #333; 
} 

#navigation .current { 
    background-color: #000; 
} 

Обратите внимание, что заказ важен! Если бы мы сначала поставили второе объявление, оно было бы отменено более общей декларацией ссылки.

Answer 2

У вас есть два варианта: вы можете использовать PHP и CSS, это лучше, потому что это не зависит от клиента. Второй вариант заключается в использовании Javascript и CSS

PHP & CSS
Я предпочитаю этот путь! Вам нужно проверить каждый сайт, если текущая страница равна каждой ссылке меню.Вот некоторые фрагменты моего решения. Он отлично работает для моего сайта. Я не знаю, работает ли он с вашим путем для связи: index.php/home. Подумайте, вы должны ее адаптировать. Поскольку я использую реальные файлы, такие как home.php и blog.php

это menu.php, я включаю его на каждом сайте:

<div id="menu"> 
     <div class="innertube"> 
     <ul> 
<? 
markIfCurrent("Willkommen", "willkommen"); 
markIfCurrent("Salzgrotte", "salzgrotte-am-fehn"); 
markIfCurrent("Heilwirkung", "heilwirkung-des-salzes"); 
markIfCurrent("Farbtherapie", "farblichttherapie"); 
markIfCurrent("Salzshop", "salzshop"); 
markIfCurrent("Erfahrungs-<br/>berichte", "erfahrungsberichte"); 
markIfCurrent("Fragen und Antworten", "fragen-und-antworten"); 
markIfCurrent("Preise", "preise"); 
markIfCurrent("Galerie", "galerie"); 
markIfCurrent("Presse", "presse"); 
markIfCurrent("Praxis", "praxis"); 
markIfCurrent("Anfahrt", "anfahrt"); 
?> 
     </ul> 
     </div> 
    </div> 

Теперь функции PHP:

/* filter selected menu items */ 
function markIfCurrent ($name, $link) { 
    $should_mark = isCurrent($link); 
    if ($should_mark) { 
     $first = strtoupper(substr($name, 0, 1)); 
     $rest = substr($name, 1); 
     echo "<li><span class='current'>".$name."</span></li>\n"; 
    } else { 
     echo "<li><a class='lower' href='".$link."'>".$name."</a></li>\n"; 
    } 
} 

/* check if $pageis current page */ 
function isCurrent ($page) { 
    /* reverse mapping */ 
    if ($page == "willkommen") { 
     $page = "index"; 
    } 
    $isCurrent = $page.".php" == getCurrentPage(); 
    return $isCurrent; 
} 

function getCurrentPage() { 
    $path = $_SERVER['PHP_SELF']; 
    $a = explode("/", $path); 
    $site_name = $a[sizeof($a)-1]; 
    return $site_name; 
} 

По крайней мере, CSS:

li span.current a { 
    background-color: black; /* or #000000 */ 
} 
li span a { 
    background-color: gray; /* or #cccccc*/ 
} 

---

JavaScript & CSS
Это больше pseude код, но та же логика для PHP версии

В этом случае также необходимо проверить текущий URL с window.location.pathname Вы получаете URL/путь к файлу. разделить на косую черту и извлечь файл. Затем вы можете перебирать элементы вашей навигации с помощью jQuery, например $("#navigation").find("a"), а затем вы можете установить стиль css для элемента a a.css("background-color", "black")