javascript - 基于 iframe src 更改类

Question

所以我有这个菜单:

<div class="default"><a href="/link/link1.html" target="change_frame">Text 1</a></div>
<div class="default"><a href="/link/link2.html" target="change_frame">Text 2</a></div>
<div class="default"><a href="/link/link3.html" target="change_frame">Text 3</a></div>

还有这个 iFrame:

<iframe src="splash.html" id="change_frame" name="change_frame" style="border-width:0;" width="100%" height="100%" frameborder="0" scrolling="no"></iframe>

我想要什么:当人们点击菜单中的其中一个链接时，我想添加或删除一个类。为了便于理解，这里举个例子:

当他们点击文本 1 时，代码应该如下所示:

<div class="default active"><a href="/link/link1.html" target="change_frame">Text 1</a></div>
<div class="default"><a href="/link/link2.html" target="change_frame">Text 2</a></div>
<div class="default"><a href="/link/link3.html" target="change_frame">Text 3</a></div>

然后，如果他们点击文本 2，事件类应该从文本 1 中删除并插入文本 2，如下所示:

<div class="default"><a href="/link/link1.html" target="change_frame">Text 1</a></div>
<div class="default active"><a href="/link/link2.html" target="change_frame">Text 2</a></div>
<div class="default"><a href="/link/link3.html" target="change_frame">Text 3</a></div>

由于目标是 iframe，我可能应该使用 javascript，但我不知道如何使用。我知道我在这里写了一堆代码，但我只是想让自己说清楚。我到处搜索，但找不到任何解决方案。

Answer 1

如果您使用的是 jQuery，则可以使用点击事件和选择器轻松实现。

$('.default').on('click', function() {

   // Remove all active classes
   $('.default').removeClass('active');

   // Add an active class on the clicked element
   $(this).addClass('active');

});

Demo here