Модификация Jquery от отображения div до изменения src

0

Это был мой первоначальный код, чтобы сделать отображение div нажатием. Но теперь я хотел изменить div на iframe src.

<iframe src="change this link on click">

любой может рассказать мне, как мне изменить скрипт, изменив src, а не вкладку?

<ul class="tabpan">
    <li class="tab" id="tab_1">One</li>
    <li class="tab" id="tab_2">Two</li>
    <li class="tab" id="tab_3">Three</li>
</ul>



<div>
    <div class="tabbox tabbox_1">tab 1 content</div>
    <div class="tabbox tabbox_2">tab 2 content</div>
    <div class="tabbox tabbox_3">tab 3 content</div>
</div>


$(function () {
        $('.tabbox_1').show();
        $('.tab').click(function () {
            var tabid = $(this).attr('id').replace('tab_', '');
            $('.tab').removeClass('active');
            $(this).addClass('active');
            if (!$('.tabbox_' + tabid).is(':visible')) {
                $('.tabbox').hide();
            }
            $('.tabbox_' + tabid).fadeIn();

        });

    });
  • 1
    Вы хотите, чтобы ваш iframe src менялся при нажатии на вкладку?
  • 1
    Вы не пытались в своем опубликованном коде? не так ли?
Показать ещё 9 комментариев
Теги:

2 ответа

0
Лучший ответ

Эта строка изменяет атрибут src iframe:

$('iframe').attr('src','new_url_goes_here');

Предостережение это изменяет все iframe, устанавливает ваш iframe с идентификатором let say myIframe и вместо этого используйте это:

$('#myIframe').attr('src','new_url_goes_here');

Поместите код внутри $ ('. Tab'). Нажмите функцию.

С уважением.

Поделиться
2

В этом примере я добавил URL-адреса в "вкладки" как пользовательские атрибуты. Вы можете ссылаться на них при попытке изменить URL-адрес iframe с помощью метода.attr():

<ul class="tabpan">
    <li class="tab" data-url="http://jquery.com" id="tab_1">One</li>
    <li class="tab" data-url="http://jqueryui.com" id="tab_2">Two</li>
    <li class="tab" data-url="http://1and1.com" id="tab_3">Three</li>
</ul>

<iframe id="mainFrame" src="http://1and1.com"></iframe>

JQuery просто извлекает атрибут URL-адреса "tab" и изменяет src iframe на этот новый URL-адрес:

$('.tabpan .tab').click(function(){
    src = $(this).attr('data-url');
    $('#mainFrame').attr('src', src);
});

Вот рабочий пример: JSFIDDLE Надеюсь, это поможет!

Поделиться
  • 1
    +1 мое предложение, вы можете изменить $(this).attr('data-url'); $(this).data('url'); из-за jsperf.com/jquery-is-data-faster-than-attr-data
  • 0
    Очень хорошее предложение. Я не могу поверить, я никогда не знал этого. Спасибо!
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню