Изменение класса на основе Iframe ЦСИ

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

1. выберите <a> потомком элемента с default класса;
2. удалить класс active из каждого элемента с классом default;
3. применить класс 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 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

Если вы используете 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