Question

我有这段代码：http://jsfiddle.net/Qchmqs/BSKrG/

<div class="step"><-- this is darned wrong
    <div id="step2"><a>Darn</a></div>
    <div id="step2"><a>Darn</a></div>
    <div id="step2"><a>Darn</a></div>
</div>
<div class="step"><-- this works fine
    <div id="step2"><a>Darn</a>
    <a>Darn</a>
    <a>Darn</a></div>
</div>

第一个块是在周围div内的三个独立div内的三个链接

底部块具有一个父div中的链接

我正在尝试更改活动链接的背景，但它不会在上部块中关闭。

该脚本适用于底部链接，但不能按预期的那样与上面的链接一起工作

PS：活动类应仅从链接切换我在页面中有很多其他脚本使用此列表中的.active链接。

Answer 1

对于初学者来说，做JamesJohnson所说的并删除多个ID。他们只能在未来遇到问题。

在上部链接中，a标记不是兄弟，因为您将每个标记放在自己的div中。因此，您需要执行此操作以从其他a中删除类：

$(this).parent().siblings('div').children('a').removeClass('active');

http://jsfiddle.net/mblase75/BSKrG/1/

不幸的是，这打破了下层链接的功能。通过向父级兄弟姐妹添加andSelf，您可以在这两个地方取得成功：

$(this).parent().siblings('div').andSelf().children('a').removeClass('active');

http://jsfiddle.net/mblase75/BSKrG/2/

Answer 2

它不适用于上层因为你为div分配相同的id。您可能应该使用class属性：

<div class="step2"><a>Damn</a></div>
<div class="step2"><a>Damn</a></div>
<div class="step2"><a>Damn</a></div>

完成上述更改后，您应该可以执行此操作：

$(".step2 a").text("Hello World!");

Answer 3

也许这个：

<div class="step">
    <div id="step2"><a>Damn</a>
    <a>Damn</a>
    <a>Damn</a></div>
</div>
<div class="step">
    <div id="step2"><a>Damn</a>
    <a>Damn</a>
    <a>Damn</a></div>
</div>

Answer 4

使用无线电输入你可以在没有任何JS的情况下创建这种效果，它会从其预期的外观（一个红色的背景“该死的”）优雅地降级到它旁边的无线电（发送相同的信息）。具有讽刺意味的是，JSfiddle的这个例子：http://jsfiddle.net/YvQdj/

我的记忆有点模糊，但我很确定这在旧版本的IE浏览器中不起作用而没有一些问题。

如何定位<a> inside a <div>?</div></a>

4 个答案: