Выберите Anchor (<a>) и идентифицированный div с тем же: target - PullRequest
Новая
       17

Выберите Anchor (<a>) и идентифицированный div с тем же: target

1 голос
/ 30 июня 2011

Я просыпаюсь над проектом, который в значительной степени опирается на псевдо-класс :target.

Если у тега <a> есть имя, и это имя - текст после #, и нетдругой элемент с идентификатором, равным тексту после #, затем a получает: target.

Это сбивает с толку, вот пример: 

<style>
    * {
        color: black;
    }
    :target {
        color: red;
    }
</style>
<div id="wrapper">
    <ul>
        <li><a href="#one" name="one">one_link</a></li>
        <li><a href="#two" name="two">two_link</a></li>
        <li><a href="#three" name="three">three_link</a></li>
    </ul>
    <div id="one">div_one</div>
    <div id="two_div">div_two</div>
    <div id="three_div">div_three</div>
</div>

Если вы нажметена «one_link» тогда «div_one» станет красным.Однако, если вы нажмете «two_link» или «three_link», то они сами станут красными (потому что нет div с идентификатором строки #, но у них есть имя строки #)

Я хочу, чтобы: target класс работал как на якоре, так и на div, или, по крайней мере, на способ выбора якоря только тогда, когда на div нацелен.Вероятно, это можно сделать с помощью Javascript, но я пытаюсь использовать чистый CSS.

Ответы [ 4 ]

2 голосов
/ 30 июня 2011

Не в чистом CSS. Нет способа «запрограммировать» css для динамического изменения селектора, чтобы добавить дополнительный текст, основанный на чем-то, что было нажато. Это за рамками CSS. Вот почему есть Javascript.

0 голосов
/ 30 июня 2011

См. Google: HTML, CSS и Javascript с нуля .

JavaScript создан для поведения и взаимодействия. Ребята из Google хорошо это объясняют (я думаю), плюс Google немного более авторитетен, чем я. Вы должны использовать для этого JavaScript.

0 голосов
/ 30 июня 2011

Это не совсем возможно.

Вы не можете использовать что-либо подобное :target ~ div из-за вашей HTML-структуры: невозможно выбрать родительский элемент. Даже если бы это не было проблемой, не существует автоматического способа сопоставить «nth» a с «nth» div.

Имея лицензию на изменение HTML, я придумал следующее: http://jsfiddle.net/pA84B/ - это неприятно.

Просто используйте JavaScript.

0 голосов
/ 30 июня 2011

Вы можете исключить выбор привязки, используя div:target

  * {
        color: black;
    }
    div:target{
        color: red;
    }

http://jsfiddle.net/

С той же техникой вы можете попробовать с a:target, чтобы получить только текущий целевой якорь

...