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

Answer 2

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

Answer 3

选择<a>类;

default

从active类;

default

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

Answer 4

JQuery，只是以更好的方式制作你的结果。

{{1}}

根据iframe src更改类

4 个答案: