Javascript 基于iframe src更改类

所以我有这个菜单：

<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>

<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>

然后，如果他们单击文本2，则应将活动类从文本1中删除并插入文本2，如下所示：

<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>

<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，但我不知道如何使用它。我知道我在这里写了很多代码，但我只想说清楚。我到处搜索，但找不到任何解决方案。

单击

a

元素时，您可以使用

addClass

将父

div

设置为

活动。试试这个：

$('.default a').click(function() {
    $('.default').removeClass('active'); // remove the class from the current active div
    $(this).closest('.default').addClass('active');
});

单击
a
元素时，可以使用
addClass
将父
div
设置为
活动的
。试试这个：

$('.default a').click(function() {
    $('.default').removeClass('active'); // remove the class from the current active div
    $(this).closest('.default').addClass('active');
});

如果您使用的是jQuery，那么可以通过单击事件和选择器轻松地完成这项工作

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

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

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

});

如果您使用的是jQuery，那么可以通过单击事件和选择器轻松地完成这项工作

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

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

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

});


选择


选择
JQuery，只需以更好的方式生成结果即可

$(document).ready(function(){
    $(".default a").on("click",function(){
          $(".default").removeClass("active");
          $(this).parent(".default").addClass("active");
    })
});

JQuery，只需以更好的方式生成结果即可

$(document).ready(function(){
    $(".default a").on("click",function(){
          $(".default").removeClass("active");
          $(this).parent(".default").addClass("active");
    })
});

请共享您尝试过的解决方案，告诉我们您在哪里卡住了。请共享您尝试过的解决方案，告诉我们您在哪里卡住了。这将在
上设置
活动
状态。即使未单击
，也会默认设置
divs，因此
未加载。div可以大于
，因此与正在单击的div和正在单击的
没有关联。这将在
上设置
活动的
状态。即使未单击
，默认的
divs，因此未加载
。div可以大于
，因此与正在单击的div和正在单击的
没有关联。