Загружать вкладку по требованию что-то вроде Youtube? - PullRequest
Новая
       12

Загружать вкладку по требованию что-то вроде Youtube?

0 голосов
/ 27 сентября 2019

Я хочу добавить вкладки на моем сайте, которые загружаются, когда пользователи нажимают на них, а не при загрузке страницы.Когда я открываю сайт, вся вкладка загружается сразу.Я хочу загрузить содержимое другой вкладки, когда пользователям нравится что-то вроде Youtube.Когда вы открываете канал на своей странице, вы получаете вкладки, такие как видео, плейлист, сообщество и т. Д. Они загружаются, когда пользователи нажимают на них.Я пытался найти так много вещей в Интернете, не могу найти решение.Я новичок в этом.Кто-нибудь может мне помочь?

Ответы [ 2 ]

1 голос
/ 27 сентября 2019

Есть несколько способов решить эту проблему:

Сверху головы, вот несколько способов:

  1. Использовать переключаемые вкладки начальной загрузки.Это было бы самым простым решением.Однако весь код будет жить на одной странице.(Источник: https://www.w3schools.com/bootstrap/bootstrap_tabs_pills.asp) asdsad

  2. Другой способ использовать библиотеку JavaScript или инфраструктуру, предназначенную для одностраничного приложения, такого как React / Vue / Angular, и использовать некоторую маршрутизацию. Но это было быперебор, если его просто несколько вкладок

  3. Создайте его самостоятельно с помощью некоторых вызовов JavaScript AJAX. Поместите данные в какой-нибудь файл JSON. Нажатием каждой кнопки / вкладки извлекайте их, используя AJAX / fetch или что-то ещеи сортируйте содержимое.

Вот как вы используете загрузочное решение: 

<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
  <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
  <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
</ul>

<div class="tab-content">
  <div id="home" class="tab-pane fade in active">
    <h3>HOME</h3>
    <p>Some content.</p>
  </div>
  <div id="menu1" class="tab-pane fade">
    <h3>Menu 1</h3>
    <p>Some content in menu 1.</p>
  </div>
  <div id="menu2" class="tab-pane fade">
    <h3>Menu 2</h3>
    <p>Some content in menu 2.</p>
  </div>
</div>
0 голосов
/ 27 сентября 2019

То, чего вы стремитесь достичь, называется ленивой загрузкой.В основном вы загружаете свой основной контент и избегаете загрузки некоторого контента, пока он не понадобится.Чтобы достичь этого, вам нужно будет сгенерировать HTML-код для того, что вы хотите загрузить сразу на сервер, и несколько контейнеров для вещей, которые вы хотите загружать.Предположим, что содержимое ваших вкладок заключено в несколько контейнеров, например: 

<div class="lazy-load-container" id="your-api-function">
</div>

, и у вас есть несколько вкладок, например 

<span onclick="yourJSFunctionToRequestTheContent('your-api-function')">Lazy Load</span>

, поэтому вам необходимо реализовать yourJSFunctionToRequestTheContent, как 

function yourJSFunctionToRequestTheContent(functionName) {
    //Request function name
    //which will return the HTML you will need in the div having the name passed as functionName
    //in the callback set the innerHTML of your div to the HTML you have received as an answer
}
...