Question

我正尝试使用边框颜色在导航按钮上创建一个简单的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在click上更改锚类以改变它们的外观。

我想做的是使用css（甚至是我猜的jquery）来专门定位“活动”链接后面的锚点，但我不确定它是否可行。

我已经测试过使用“h3 + p {”类型的选择器，我理解它是如何工作的，但是一旦我尝试定位链接，它似乎就会停止运行。< / 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}

所以基本上我想弄清楚为什么我不能让兄弟组合器使用链接，如果有解决方案或解决方法。

Answer 1

您正在使用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

Answer 2

我想做的是使用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内容简单地用于它的意图。

我希望它有所帮助。干杯

Answer 3

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

Answer 4

支持undefined的答案。如果你只想使用css，你可以只在li而不是a元素上切换类。那么这很容易： li.active + li a {background-color：red}

从字面上看，它意味着：将li中的一个元素定位在具有“active”类的那个元素旁边。

CSS导航列表 - 下一个链接选择器兄弟组合

4 个答案: