5

我正在尝试使用边框颜色在我的导航按钮上创建一个简单的 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}

...ETC。

这显然有效：

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

……那为什么不呢？

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

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

4

4 回答 4

3

您正在使用Adjacent sibling combinator，因为您的锚链接不是兄弟姐妹，您的选择器不会选择元素。

E + F:紧跟在 E 元素之前的 F元素

当您使用 jQuery 时，您可以通过以下方式选择元素：

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

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

于 2012-10-27T23:39:06.943 回答
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 内容简单地添加到它想要的确切锚点。

我希望它有所帮助。干杯

于 2012-10-27T23:44:39.923 回答
2

在 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')
})
于 2012-10-27T23:46:38.167 回答
2

支持未定义的答案。如果您只想使用 css，您可以只在 li 上切换类而不是 a 元素。然后就很简单了： li.active + li a { background-color:red }

从字面上看，它的意思是：将 li 中的 a 元素定位到具有“活动”类的元素旁边。

于 2012-10-28T00:43:05.020 回答