基于 iframe src 更改类答案

【问题标题】：Changing class based on iframe src基于 iframe src 更改类
【发布时间】：2015-08-28 06:11:06
【问题描述】：

所以我有这个菜单：

<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，但我无法弄清楚如何使用。我知道我在这里写了一堆代码，但我只是想让自己清楚。我到处搜索，但找不到任何解决方案。

【问题讨论】：

请分享您尝试过的解决方案，告诉我们您遇到的问题。

标签： javascript jquery html css iframe

【解决方案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

【讨论】：

这将在.default div 上设置active 状态，即使<a> 没有被点击，因此<iframe> 还没有被加载。 div 可以大于<a>，因此与被点击的 div 和被点击的<a> 没有关联。

【解决方案2】：

选择具有default 类的元素的<a> 子元素；
从每个具有default 类的元素中删除active 类；
将active 类应用于当前<a> 的父元素。

演示：

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

iframe {
  height: 300px;
  width: 100%;
}
.active:after {
  color: red;
  content: ' <- active!';
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="default"><a href="http://stackoverflow.com" target="change_frame">Text 1</a>
</div>
<div class="default"><a href="http://stackoverflow.com/questions/7117073/how-to-add-a-tooltip-to-a-div/25813336#25813336" target="change_frame">Text 2</a>
</div>
<div class="default"><a href="http://stackoverflow.com/a/20147874/1654265" target="change_frame">Text 3</a>
</div>

<iframe src="http://stackoverflow.com" id="change_frame" name="change_frame" frameborder="0" scrolling="no"></iframe>

【讨论】：

【解决方案3】：

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

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

Example fiddle

【讨论】：

【解决方案4】：

JQuery，让你的结果更好。

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

【讨论】：