Чтобы получить динамический контент, вам нужно извлечь эти данные из базы данных или другого веб-сайта или другой веб-страницы, используя AJAX .Я рекомендую читать и изучать JQuery , поскольку он довольно прост и, как и любой другой язык, следует логическому потоку.Синтаксис JQuery также довольно прост, поэтому его не должно быть слишком сложно подобрать.Но я отвлекся.
Если ваша структура HTML выглядит следующим образом:
<div id="container">
<div id="panel1" class="panel">
<a href="#" class="button" id="btn-1">Button 1</a>
<div id="iframe-1"></div>
</div>
<div id="panel1" class="panel">
<a href="#" class="button" id="btn-2">Button 2</a>
<div id="iframe-2"></div>
</div>
<div id="panel1" class="panel">
<a href="#" class="button" id="btn-3">Button 3</a>
<div id="iframe-3"></div>
</div>
</div>
и ваш CSS выглядит примерно так:
.panel{
float:left;
}
/* Initially hide all iframe divs */
.panel > div{
display:none
}
/* Initially show only the first iframe div */
.panel > div:first-child{
display:block;
}
Используя JQuery, вы можете использовать:
//Run the code after the elements of the page have been downloaded. This is usually how most JQuery syntax starts.
$(document).ready(function(){
//When the button is clicked, run a function
$('.button').click(function(e){
e.preventDefault(); //Prevents default click behavior; similar to defining onclick='return false;' in the <a /> tag.
$('.button').siblings('div').hide(); //Hide all open iframe divs
$(this).siblings('div').show(); //Show the iframe div corresponding to clicked link
var id = $(this).attr('id').replace('btn-','iframe-'); //Get the ID of the link clicked and replace 'btn-' with 'iframe-'
$('#'+id).load('http://<url of the page you want to load>'); //Load the new web page or content into the iframe div. This could be an absolute or relative path.
});
});
Аналогично функции .load () , существует также функция .ajax () , которая является более полной.Также помните, как работает Javascript, он компилируется на клиентском компьютере и запускается один раз при загрузке страницы.Таким образом, при извлечении динамических данных, которые добавляются в HTML-страницу, любые действия, такие как щелчки, зависания и т. Д., Необходимо перезагружать для нового контента.Вам нужно будет использовать событие JQuery .on () или .delegate () .
Надеюсь, это поможет.