Ссылка, изменяющая класс родительского элемента <div>, содержимое двух <iframe>элементов - PullRequest
Новая
       3

Ссылка, изменяющая класс родительского элемента <div>, содержимое двух <iframe>элементов

1 голос
/ 13 апреля 2011

Интересная (и довольно сложная) проблема здесь ...
У меня есть страница с двумя iframes и набором ссылок в верхней части, каждая из которых содержится внутри div с фоном изображения.Я хочу, чтобы содержимое обоих фреймов изменялось (до двух отдельных HTML-документов) при щелчке по ссылке, а также чтобы фоновое изображение родительского div ссылки также менялось.Однако я также хочу, чтобы родительский div автоматически возвращался к исходному классу при нажатии на другую ссылку (т. Е. У меня есть два класса: «активный» и «ожидающий». При нажатии на ссылку (и ее содержимое впоследствии отображается вiframes) Я хочу, чтобы он переключился на класс 'active'. Однако в любое другое время (в том числе после того, как другая ссылка может быть нажата и активна), я хочу, чтобы она вернулась к использованию класса 'wait'.)

Вот мой текущий код / ​​разметка:

Javascript:
function changeFrame(link) {<br> $('#first iframe').src=link.href;<br> $('#second iframe').src= (здесь будет вторая ссылка, не знаю, как это определить) link.ParentNode.addclass("activebutton");

HTML:
<div class="waitingbutton"><br> <a href="yes.html" (где-то здесь будет вторая ссылка для второго iframe) class="waitingbutton" onclick="changeFrame(this);<br> return false;">Button Text</a><br> </div>
(После этого идут еще четыре деления, каждая идентичная панель Кнопка Текст и ссылки)

КакЯ подозреваю, что вы можете сказать, я просто догадываюсь здесь.Все еще не очень знакомы с Javascript, надеясь, что кто-нибудь может мне помочь.

1 Ответ

2 голосов
/ 14 апреля 2011

Вы, похоже, используете jQuery.

Вот ужасный способ сделать это;но это работает: 

<a href="yes.html" secondary-href="somewhere-else.html" class="waitingbutton" onClick="return changeFrame(this);">Button Text</a>

И ваш JavaScript: 

function changeFrame(link) {
    $('#first iframe').attr("src", $(link).attr('href'));
    $('#second iframe').attr("src", $(link).attr('secondary-href'));
    return false;
}

Обратите внимание, что было бы более идиоматичным делать jQuery без каких-либо обработчиков onClick, а просто инициализировать все это в вашем<head> / <script> с начала: 

<script type="text/javascript">
    $(function() {
        $("a.iframe-link").click(function(event) {
            $("#first iframe").attr("src", $(link).attr("href"));
            $("#second iframe").attr("src", $(link).attr("secondary-href"));

            // Whatever used to be the activebutton, make it 'waitingbutton', and remove
            // the 'activebutton' class.
            $(".activebutton").
                addClass("waitingbutton").
                removeClass("activebutton"); 

            // Remove .waitingbutton from this, add .activebutton.
            $(this).removeClass("waitingbutton").addClass("activebutton");

            // Don't allow the link's default action (to follow the href in the normal
            // way).
            event.preventDefault();
        });
    });
</script>

Затем позже: 

<a class="iframe-link waitingbutton" href="yes.html" second-href="whatever.html">Hello!</a>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...