Список навигации CSS, селектор следующей ссылки, родственный комбинатор

Я пытаюсь создать простой 3D-эффект на моих навигационных кнопках, используя цвета границ. Мои кнопки просто состоят из неупорядоченного списка с фоновым цветом, цветами границ и текстовым отступом и, конечно же, ссылками, поэтому ссылки обычно вложены следующим образом:

<ul>
<li><a class="active"   href="link1.html">link1</a></li>
<li><a class="inactive" href="link2.html">link2</a></li>
<li><a class="inactive" href="link3.html">link3</a></li>
..etc
</ul>

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

То, что я хотел бы сделать, это использовать css (или даже jquery, я думаю), чтобы специально настроить якорь, который следует за «активной» ссылкой, но я не уверен, возможно ли это.

Я протестировал использование селектора типа " h3 + p { " и понимаю, как это работает, но, похоже, он перестает работать, как только я пытаюсь настроить таргетинг на ссылки.

Я пробовал:

a.active + a {background-color:red}

и...

a.active:link + a:link {background-color:red}

и другие варианты специфичности...

li a.active:link + a:link {background-color:red}

ul li a.active:link + a:link {background-color:red}

ul li a.active:link + a.inactive:link {background-color:red}

...и т.д.

Очевидно, это работает:

p.active + p {background-color:red}

... так почему бы и нет?

a.active + a {background-color:red}

Итак, в основном я пытаюсь выяснить, почему я не могу заставить комбинатор братьев и сестер работать со ссылками, и есть ли решение или обходной путь.


jquery css next hyperlink siblings
person table_formatter    schedule 27.10.2012    source источник

Ответы (4)


arrow_upward
3
arrow_downward

Вы используете Adjacent sibling combinator, так как ваши якорные ссылки не являются родственными, ваш селектор не выбирает элемент.

E + F: элемент F, непосредственно которому предшествует элемент E

Поскольку вы используете jQuery, вы можете выбрать элемент следующим образом:

$('a.active').parent().next().children('a').addClass('red')

http://www.w3.org/TR/selectors/#adjacent-sibling-combinators

person undefined    schedule 27.10.2012
comment
Если я правильно вас понял, поскольку якоря вложены в элементы списка, они на самом деле не являются смежными... верно? Тогда почему не работает что-то более конкретное... например, следующий вложенный селектор? ul li a.class: ссылка + ul li a: ссылка {бла-бла-бла} - person table_formatter; 28.10.2012
comment
Да, поскольку они не братья и сестры, ваш селектор не выбирает элемент, можете ли вы показать мне (может быть, в демо), как работает ваш вложенный селектор? - person undefined; 28.10.2012
comment
Я избавлю вас от проблем. Что я не тестировал, так это вложенные абзацы или другие элементы внутри элементов списка, и они тоже не работают. Например, если я вставляю абзац внутри элемента списка, соседний комбинатор родственных элементов не работает должным образом. Соседний родственный комбинатор просто не должен работать с вложенными элементами, и это моя проблема. Спасибо, что привели меня к такому выводу. Я считаю, что jquery - это ответ в этой ситуации. - person table_formatter; 28.10.2012

arrow_upward
2
arrow_downward

В jQUery можно настроить таргетинг на следующую ссылку и легко добавить к ней класс.

Предполагая, что ваш обработчик кликов выглядит так:

$('#linkList a').click(function(){
    $('a.active').toggleClass('active').toggleClass('inactive')
    $('a.redClass').removeClass('redClass')
    $(this).toggleClass('active').toggleClass('inactive').parent().next().find('a').addClass('redClass')
})
person charlietfl    schedule 27.10.2012
comment
Мой очень похож. Это, наверное, самый простой вариант сейчас, когда я его вижу. Спасибо! - person table_formatter; 28.10.2012

arrow_upward
2
arrow_downward

То, что я хотел бы сделать, это использовать css (или даже jquery, я думаю), чтобы специально настроить якорь, который следует за «активной» ссылкой, но я не уверен, возможно ли это.

Возможно, как вы уже заявили, существует подход css с использованием целевых селекторов, однако я бы выбрал решение jQuery для мониторинга вашего состояния привязки, чтобы подход, описанный ниже, работал, необходимо добавить идентификатор к вашему точному якорю как ваш хэш href, например:

<a href="#myanchor" id="myanchor">My anchor</a>

Затем вы можете просто отслеживать событие hashchange из объекта $(window), привязав функцию к указанному событию, например:

$(window).bind('hashchange', function(e) {

            var page = window.location.hash; // page = #myanchor
            $(page).doMyCssStuff(); //
        });

Это хороший способ, например, добавить стиль навигации, если пользователь нажмет «назад» в своей истории, приведенный выше скрипт просто сделает ваши CSS-элементы точно с якорем, для которого он предназначен.

Я надеюсь, что это помогло. Ваше здоровье

person Bruno Vieira    schedule 27.10.2012

arrow_upward
2
arrow_downward

Поддержите ответ undefined. Если вы хотите использовать только css, вы можете просто переключить класс на li вместо элемента a. Тогда это было бы достаточно просто: li.active + li a { background-color:red }

Буквально это означает: нацельтесь на элемент a внутри li рядом с элементом с «активным» классом.

person Devon Ville    schedule 28.10.2012
comment
Я, конечно, попробую, но я не уверен, что это сработает, учитывая стиль, который я сделал до сих пор. Благодарю вас! - person table_formatter; 28.10.2012
comment
Ну, это легче изменить, чем предполагалось. Если все ваши стили определены в a.active, просто измените селектор на li.active a. - person Devon Ville; 28.10.2012
comment
Я обязательно попробую... по какой-то причине я думаю, что уже пробовал это, и что-то меня остановило... в коде гораздо больше, чем упоминалось ранее. Спасибо еще раз! - person table_formatter; 28.10.2012