Как сделать переключение вкладок как на youtube?

Question

[Богдан Кучерук]

Как сделать такое-же переключение вкладок как на каналах в ютубе?

Answer 1

[historydev]

Comments

[Богдан Кучерук]

А как выводить разное содержимое для разных вкладок?

[historydev]

Богдан Кучерук, innerHTML

[Богдан Кучерук]

Владимир, я пытаюсь загрузить через AJAX разные данные при нажатии на вкладки. После выполнения AJAX запроса и получения JSON объекта пока ничего лучше не придумал как сделать блок пустым

document.getElementById('container').innerHTML = '';

И после этого сделать append в этот же блок данных из JSON.

Но думаю что это не очень правильно так как оно каждый раз будет по-новому все загружать.

Каким образом это можно сделать чтобы максимально было похоже как на youtube?

[historydev]

Богдан Кучерук, весь код покажите свой

[Богдан Кучерук]

Владимир,

<div style="display:flex;justify-content:space-around;">
<div onclick="change()">
onclick1
</div>
<div onclick="change2()">
onclick2
</div>
<div onclick="change3()">
onclick3
</div>
<div onclick="change4()">
onclick4
</div>
<div onclick="change5()">
onclick5
</div>
</div>
<div id='container'>
Content
</div>

function change(){
var inProgress=false;
var startFrom=10;
$.ajax({
    url:'ajaxtabs.php',
    method:'POST',
    data:{"content":content},
    beforeSend:function(){inProgress=true;
    }

}).done(function(data){
    data=jQuery.parseJSON(data);
    document.getElementById('container').innerHTML = '';
    if(data.length>0){
        $.each(data, function(index, data){
          $("#container").append(data.content);
          });
        inProgress=false;
        startFrom +=10;
    }
});
}

И такие функции написать на разные вкладки.

[historydev]

Богдан Кучерук, как выглядит change2?

[historydev]

Богдан Кучерук, что у вас приходи в data вот здесь?

.done(function(data)

[Богдан Кучерук]

Владимир, change2 выглядит также как chage1, только запрос отправляется на другой php файл и переменная другая передаётся.

в .done(function(data) получаю JSON строку

затем очищаю блок:

document.getElementById('container').innerHTML = '';

И добавляю туда полученные данные:

if(data.length>0){
        $.each(data, function(index, data){
          $("#container").append(data.content);
          });
        inProgress=false;
        startFrom +=10;
    }

[historydev]

Богдан Кучерук, Что в json? Объект? Html? Что? Покажите мне change 2 полностью.

[Богдан Кучерук]

В JSON строки из БД.

function change2(){
var inProgress=false;
var startFrom=10;
$.ajax2({
    url:'ajaxcomm.php',
    method:'POST',
    data:{"user":user},
    beforeSend:function(){inProgress=true;
    }

}).done(function(data){
    data=jQuery.parseJSON(data);
    document.getElementById('container').innerHTML = '';
    if(data.length>0){
        $.each(data, function(index, data){
          $("#container").append(data.post);
          });
        inProgress=false;
        startFrom +=10;
    }
});
}

[historydev]

Богдан Кучерук, какие строки? Вы можете просто показать формат данных?

[historydev]

Богдан Кучерук, мне мало той информации что вы дали, но если я правильно понял, никаких сложностей здесь нет:

async function get_post(id) { // id или url в вашем случае - ajaxcomm.php, ajaxtabs.php и т.д.
	return await fetch('https://jsonplaceholder.typicode.com/posts/' + id)
  .then((response) => response.json())
  .then((json) => json);
}

Перепишите на свой ajax и будет вам счастье, этот код вы можете запустить у себя и передавать id, посты будут меняться, посмотрите как работает

[Богдан Кучерук]

Владимир, строки из БД (title, imagelink, html код, date)

[Богдан Кучерук]

Владимир, спасибо большое! Доброй ночи

[historydev]

Богдан Кучерук, в вашем случае я бы использовал так: (url, data) т.к ваш объект меняется тоже, доброй ночи