кнопка ссылки меняется с CSS? - PullRequest
0 голосов
/ 20 августа 2010

Проще говоря, я хотел бы достичь чего-то, что у нас есть в верхнем навигаторе с переполнением стека, где цвет активной кнопки различен, НО с использованием только CSS, НЕ JavaScript?

Но a: activeКажется, работает как ожидалось.Я видел несколько очень распространенных примеров, когда это делается путем назначения класса активному элементу в разметке со стороны сервера или клиента.Это возможно только с использованием CSS?

<HTML>
    <HEAD>
        <TITLE>Its Nav</TITLE>
        <STYLE type="text/css">
            div {
                width:200;
            }
            ul {
                list-style:none;
            }
            ul li a {
                padding:2 4 2 4;
                border:1px solid blue;
                display:block;
                text-decoration:none;
            }
            ul li a:active {
                color:green;
            }
            ul li a:hover {
                color:red;
            }           
            ul li a:link {
                color:gray;
            }
        </STYLE>
    </HEAD>
    <BODY>
    <div>
        <ul>
            <li><a href="#" >link one</a></li>
            <li><a href="#" >link two</a></li>
            <li><a href="#" >link three</a></li>
            <li><a href="#" >link four</a></li>
            <li><a href="#" >link five</a></li>
            <li><a href="#" >link six</a></li>
            <li><a href="#" >link seven</a></li>
            <li><a href="#" >link eight</a></li>
            <li><a href="#" >link nine</a></li>
            <li><a href="#" >link ten</a></li>
        </ul>
    <div>
    </BODY>
</HTML>

1 Ответ

0 голосов
/ 20 августа 2010

Если я понимаю, что вы хотите сделать, использование: active не поможет вам. Активный псевдокласс css показывает, когда нажата ссылка (именно тогда, когда она нажата и до загрузки следующей страницы). После этого он меняется на посещенный.

Редактировать: Я не видел, чтобы вы сначала хотели исключительно решение CSS. Я считаю, что вам нужно то, на что уже был дан ответ. Проверьте Как установить активную ссылку по умолчанию при первой загрузке страницы и посмотрите, поможет ли это:)

Поскольку вам не нужно решение JavaScript, я предлагаю создать новый класс для активного тега <li> на панели навигации. Вы можете сделать это динамически (например, с помощью php) или вручную для каждой страницы в html.

Как уже прокомментировали другие люди, было бы проще дать вам ответ, который вы можете применить напрямую, если бы вы опубликовали свой код.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...