у меня сейчас есть страница со списками материалов, и когда я нажимаю на этот список ссылка открывается в новом окне (то есть вкладке), тут и вопрос как сделать так чтобы эти страницы загружались снизу списка без перенаправления или открытия страницы
2 ответа
Вам нужен ajax. И скрипт на сервере, который отдаёт только данные или часть html для отрисовки нужного DOM.
function more(data) {
return fetch('//httpbin.org/get?data='+encodeURIComponent(data))
.then(res => res.json());
}
let i = 0;
document.getElementById('more')
.addEventListener('click', () => {
++i;
more(`<b>Динамический</b> контент ${i}`)
.then(content => {
let addition = document.createElement('div');
addition.innerHTML = content.args.data;
document.getElementById('content')
.appendChild(addition);
})
})
<div id=content>
<div>Статический контент</div>
</div>
<button id=more>Ещё...</button>
Я бы предложил использовать pjax виджет yii2. Пример
use yii\widgets\Pjax;
<li><a href='/example'>Ссылка</a></li>
Pjax::begin(['id' => 'content']);
Pjax::end();
<script>
$('body').on('click', 'a', function(){
$.pjax({
url : $(this).attr('href'),
container : '#content',
timeout : 10000,
push : false,
raplace: false,
scrollTo : false,
})
});
</script>
При нажатии на ссылку будет подгружаться содержимое страницы /example в блок с id = content. Более подробно можно посмотреть по ссылке http://www.yiiframework.com/doc-2.0/yii-widgets-pjax.html