Как загрузить / заменить весь DIV из внешнего файла HTML? - PullRequest
2 голосов
/ 08 августа 2010

У меня есть следующая настройка страницы index.html:

<html>
  <head>
  </head>
  <body>
    <div id="container">
      <div id="header">
      </div>
      <div id="sidebar_menu">
      </div>
      <div id="thecontent">
        <div id="page_banner">
        </div>
        <div id="page_content">
        </div>
        <div id="page_footer">
        </div>
      </div>
    </div>
  </body>
</html>

В дополнение к этому у меня есть несколько отдельных файлов .html, которые отражают параметр в моем меню боковой панели, поэтому, когда пользователь впервыеприземлится на странице, они увидят файл index.html на основе вышеуказанной настройки, т.е.показывает заголовок / меню / содержимое и нижний колонтитул.

Мой вопрос заключается в том, что когда пользователь нажимает кнопку «О нас», например, я хочу просто заменить «thecontent» div содержимым моего файла about-us.html файл, но без перезагрузки меню заголовка и боковой панели.Я просто хочу, чтобы весь div "thecontent" был заменен на div "thecontent" из моего файла about-us.html.

Возможно ли это, как я уже сказал, у меня есть несколько отдельных файлов .html и действительноЯ не хочу дублировать код, как мое меню боковой панели на каждой странице, так как только мое содержимое будет меняться в зависимости от выбора меню.

Я посмотрел jQuery.load () из этого урока .

Я думаю, что это не сработает.Также видел .replacewith (), но не уверен, что это правильно, и если это так, не знаю, как использовать в моем сценарии, чтобы выключить и заменить div на внешний файл .html.

Ответы [ 4 ]

6 голосов
/ 08 августа 2010

Метод загрузки jQuery имеет специальный синтаксис, который позволяет вам выбирать, какой контент вы хотите загрузить из предоставленного вами URL. Вы просто указываете селектор CSS после вашего URL. (Прочтите документацию , в разделе "Загрузка фрагментов страницы")

Например:

$("#thecontent").load("about-us.html #thecontent");

Размещено демо:

http://jsbin.com/uvera3 (редактируется через http://jsbin.com/uvera3/edit)

0 голосов
/ 02 ноября 2012

Если сервер включает HTML для слоя, который будет заменен, вы можете сделать что-то вроде этого:

$.get('/server-side.html', function(data)
{
    $('#content').html($(data).html());
});

Предполагая, что /server-side.html возвращает что-то вроде этого:

<div id="content">
    YOUR CONTENT HERE
</div>

Надеюсь, это поможет. С уважением.

0 голосов
/ 08 августа 2010

Описание : загрузить данные с сервера и поместить возвращенный HTML-код в соответствующий элемент.

Это прямо из документации jQuery для .load(), котораябудет делать точно , что вы хотите.

$('#thecontent').load('/whereever/about-us.html');

Все сделано, спасибо!

.load ()

0 голосов
/ 08 августа 2010

Вы пробовали загрузить? Это именно то, что вы хотите:

$('#thecontent`').load('about-us.html');

привязано к ссылке:

$(function() {
    $("#aboutuslink").click(function(){
          $('#thecontent`').load('about-us.html');
         return false;
    }) ;
});
<a href="#" id="aboutuslink">About Us</a>

В http://api.jquery.com/load/ прокрутите вниз до части о загрузке фрагментов страницы.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...