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.

Please share the solutions you've tried, tell us where you got stuck. — Jeroen, Jun 12 '15 at 09:25

score 3 · Answer 1 · answered Jun 12 '15 at 09:32

3

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

answered Jun 12 '15 at 09:32

Maxime Willinger

449
1
4
7

1

This will set the `active` state on `.default` divs even if the `` has not been clicked, and hence the `` 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><a>` being clicked.</a> – Andrea Ligios Jun 12 '15 at 10:02

score 1 · Answer 2 · answered Jun 12 '15 at 09:25

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

score 1 · Accepted Answer · answered Jun 12 '15 at 09:40

select the <a> child of an element with default class ;
remove the active class from every element with default class ;
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>

score 0 · Answer 4 · answered Jun 12 '15 at 09:47

0

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");
    })
});

answered Jun 12 '15 at 09:47

Sibin V A

57
4

Changing class based on iframe src

4 Answers4