Вкладки с динамической подгрузкой

[alleclf 0]

Помогите пожалуйста понять как создать вкладки с динамической подгрузкой данных. Причём, внутри вкладок должен быть iframe либо скрипт.

Всего должно быть 3 вкладки.

Нашел вот такое решение:

<span class="address-link" data-target-id="target-div-7">вкладка</span>
<div id="target-div-7"></div>

Код скрипта:

$('.address-link').click(function(){
   var targetId = $(this).data('target-id');
   $('#' + targetId).html('<iframe код айфрейм></iframe>'); 
});

Решение рабочее, но это НЕ вкладки и этот код НЕ работает если вместо iframe использовать скрипт.

[Switch74 382]

суть вкладок такая же может быть,
код скрипта нужно править, сейчас все вкладки у вас будут подгружать один и тот же iframe
 

<span class="address-link" data-target-id="target-div" data-target="http://site.ru/page1/">вкладка1</span>
<span class="address-link" data-target-id="target-div" data-target="http://site.ru/page2/">вкладка2</span>
<div id="target-div"></div>

 

$('.address-link').click(function(){
   var targetId = $(this).data('target-id');
   var target = $(this).data('target');
   $('#' + targetId).html('<iframe src="'+target +'"></iframe>'); 
});

Не понятно что за скрипты вы планируете грузить, по сути ни чего не мешает грузить скрипты, и даже iframe через скрипты

[alleclf 0]

А как можно передать в "span" маркер что именно эта вкладка активна?

Обычная вкладка:

<span class="address-link"

Активная вкладка:

<span class="address-link active"

И при смене вкладке чтобы маркер перепрыгивал на новую вкладку (активную)

[Switch74 382]

https://jsfiddle.net/torx7c03/

[alleclf 0]

23 часа назад, Switch74 сказал:

https://jsfiddle.net/torx7c03/

Большое спасибо