jquery CSS导航列表--下一个链接选择器同级组合器

js5cn81o 于 2023-06-22 发布在 jQuery

关注(0)|答案(4)|浏览(98)

我试图创建一个简单的三维效果，我的导航按钮使用边框颜色。我的按钮只是由一个无序的列表组成，包括背景颜色、边框颜色和文本填充，当然还有链接，所以链接以典型的方式嵌套，如下所示：

<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

来源：https://stackoverflow.com/questions/13105125/css-navigation-list-next-link-selector-sibling-combinator

4条答案

按热度按时间

plicqrtu1#

你使用的是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

赞(0）回复(0）举报 2023-06-22

kognpnkq2#

在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')
})

赞(0）回复(0）举报 2023-06-22

zwghvu4y3#

我想做的是使用css（甚至我猜是jquery）来专门针对“活动”链接后面的锚，但我不确定这是否可行。
这是可能的，正如你已经说过的，有使用目标选择器的css方法，但是，我会使用jQuery解决方案来监视你的锚状态，为了下面的方法工作，有必要向你的锚添加一个id，就像你的href哈希一样，比如：

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

然后，您可以通过将函数绑定到引用的事件来监视**$（window）**对象中的 hashchange 事件，如：

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

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

这是一个很好的方式，例如添加一个导航样式，如果用户点击“返回”它的故事，上面的脚本将简单地做你的css的东西，以确切的锚，它的意思。
希望能帮上忙。干杯

赞(0）回复(0）举报 2023-06-22

dxxyhpgq4#

支持undefined的答案。如果你只想使用css，你可以在li而不是a元素上切换类。那就简单多了li.active + li a { background-color：red }
字面意思是：将li中的a元素定位到“active”类旁边。

赞(0）回复(0）举报 2023-06-22