стилизация ссылок с использованием CSS

Question

.hi, ребята, у меня есть небольшая проблема при оформлении строки меню.у меня есть следующий код:

#can_header {
    width:1024px;
    height:140px;
    background-color:#8D96A8;
}
#can_header ul{
    list-style-type:none;
    margin: 0;
    padding: 110px 0 0 550px;
    font-family: adolph;
    text-transform: uppercase;
    font-size: 1em;
}
#can_header li{
    display:inline-block;
    line-height: 15px;
    border-right: 2px solid #CCC;
}
#can_header li#item-104{
    border-right: none; 
}
#can_header ul a:visited{
    color:#CCC;
    text-decoration:none;
    margin-right:15px;
    margin-left:15px;
}
#can_header ul a:link{
    color:#CCC;
    text-decoration:none;
    margin-right:15px;
    margin-left:15px;
}
#can_header ul a:hover{
    color:#EB1886;
}
#can_header ul a:active{
    color:#FFFFFF;
}

что я хочу сделать, это то, что когда я нажимаю одну из ссылок на моем ul, цвет выбранной ссылки будет постоянно меняться, пока на странице ссылки.с моим настоящим кодом цвет ссылки меняется только при нажатии ... но когда страница изменится, цвет вернется к нормальному.ТИА!Больше силы!

. Кстати, я использую Joomla, я просто редактирую CSS шаблона, который я создал.

Answer 1

Боюсь, то, что вы хотите сделать, невозможно только с помощью CSS. Что вы можете сделать, это создать класс css, который указывает, что выбран элемент в вашем меню, и назначить этот класс вашему элементу li, используя javascript или на стороне сервера, когда вы визуализируете шаблон

Answer 2

Вы не можете сделать это только с помощью CSS, вам нужно добавить какой-то класс к выбранной ссылке (например, class="selected"), используя Javascript или PHP.

Затем вы можете добавить правило стиля для ссылок с классом .selected.

Answer 3

Это будет обрабатываться модулем меню, который вы используете для отображения меню.Большинство модулей имеют возможность включить активное выделение, которое в основном делает то, о чем все говорят, добавляет класс CSS к активному пункту меню.Скорее всего, все, что вам нужно сделать, это включить активное выделение и добавить соответствующий CSS.

Кроме того, я заметил, что вы отключаете правую границу в одном из пунктов меню, используя itemID.Вам лучше использовать селектор псевдо: lastchild, если вы когда-нибудь измените порядок пунктов меню или удалите тот, который вы выбрали последним.

Вместо #can_header li#item-104 используйте #can_header li:last-child

Answer 4

Их право, вы не можете сделать это только с помощью CSS.Вы можете использовать: active и изменять цвет текста или что-то еще, пока он нажимается вниз (он же onmousedown), но вы не можете изменить его, например, синий + щелчок = красный.

JQuery должен иметь возможностьчтобы помочь вам с этим, хотя.

Answer 5

Вы должны добавить класс css программно к дочернему объекту на основе запрошенной страницы.

Пример с php:

function GetFileName()
{
    $currentFile = basename($_SERVER["PHP_SELF"]);
    $parts = Explode('.', $currentFile);
    return $parts[0];
}
$basename = GetFileName();

<li>
    <a href="index.php" <?php if($basename =="index") echo "class='current'"; ?>>Home</a>
</li>
<li>
    <a href="about.php" <?php if($basename =="about") echo "class='current'"; ?>>About</a>
</li>