Changing class based on iframe src

Question

So I have this menu:

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

And this iFrame:

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

What I want: when people click on one of those links in the menu, I want to add or remove a class. Here's an example to make it easier to understand:

When they click on text 1, the code should look like this:

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

And then, if they click on text 2, the active class should be removed from text 1 and inserted on text 2, like this:

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

Since the target is an iframe, I should probably use javascript, but I can't figure it out how. I know I wrote a bunch of code here, but I just wanna make myself clear. I searched everywhere but I couldn't find any solution.

• Jeroen: Please share the solutions you've tried, tell us where you got stuck.

Answer 1

If you're using jQuery, you can easily do that with click events and selectors.

$('.default').on('click', function() {
 // Remove all active classes
 $('.default').removeClass('active');
 // Add an active class on the clicked element
 $(this).addClass('active');
});

Demo here

• Andrea Ligios: This will set the active state on .default divs even if the <a> has not been clicked, and hence the <iframe> has not been loaded. The div can be bigger than the <a> and so there is no correlation with the div being clicked and the <a> being clicked.

Answer 2

1. select the <a> child of an element with default class ;
2. remove the active class from every element with default class ;
3. apply the active class to the parent element of the current <a>.

Demo:

$(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 3

When the a element is clicked you can use addClass to set the parent div as active. Try this:

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

Example fiddle

Answer 4

JQuery, simply make your result in a better way.

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