Как загрузить HTML в один div с помощью вкладок

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

У меня была настройка скрипта для переключения отображения / скрытия разделов на странице с пунктами меню.

Однако я хотел загрузить внешний HTML в один из них и столкнулся с проблемами.

Теперь я хочу, чтобы пункты меню просто загружали внешний HTML в один div.

Кажется, я не могу заставить это работать, и я хочу иметь такое меню:

 <div id="topmenu">
<a href="#" >Home</a>
<a href="#" >Videos</a>
<a href="#" >Follow</a>
<a href="#" >Contact</a>
</div>

Каждый элемент загружает другой HTML-код в div, подобный этому, с помощью jQuery:

 <article>
<div id="bodycontent">
...
</div>
</article>

1. Недостаточно предоставленной информации, которая получает данные извне. Всегда показывайте, что вы пробовали

2. Я так много перепробовал из онлайн-поиска, что я дошел до того, что просто хочу переделать его с нуля, однако лучший способ

Ответ №1:

Если вы хотите добавить или хотите сказать загрузить внешний html, вам нужно добавить некоторый java scrip.Давайте возьмем ваш пример.

     <div id="topmenu">
<a href="#" id='homeTab'>Home</a>
<a href="#" id='videoTab'>Videos</a>
<a href="#" id='followTab'>Follow</a>
<a href="#" id='contactTab'>Contact</a>
</div>

Смотрите, я добавил отдельный идентификатор для каждого, теперь вам нужно вызвать функцию загрузки js

 $("#homeTab").on('click',function(){
    //firstly clear html part
    $('#bodycontent').html('');
    $('#bodycontent').load('hometab.html');//put your exact loaction of html file in my case I'm assume both are in same folder.
});

Вот и все, что вы можете сделать вот так.

Надеюсь, это сработает для вас.

1. Хорошо, итак, в этом примере мне нужно будет выполнить 4 разных экземпляра приведенного ниже кода с каждым идентификатором и URL?

2. $(«#HomeTab»).on(‘click’,function(){ // сначала очистить часть html $(‘#bodycontent’).html(«); $(‘#bodycontent’).load(‘hometab.html ‘);//укажите ваше точное местоположение htmlфайл в моем случае я предполагаю, что оба находятся в одной папке. });

3. Извините, я новичок в stackoverflow, поэтому я не уверен, как редактировать или удалять комментарии

4. Я предлагаю вам провести некоторые исследования и разработки самостоятельно или обратиться за помощью к кому-нибудь из старших. Я написал именно то, что вы хотите. Пожалуйста, не загружайте только работы на сервере, чтобы сказать, когда он запущен на локальном хосте и т. Д.