Открыть другую страницу/содержимое в другом div HTML Javascript

Question

Мне нужна ваша помощь еще раз. У меня есть 2 divs: боковая панель и контент. В SIDEBAR у меня есть некоторые ссылки (a b c). Когда я нажимаю ссылку «a», я хочу открыть pageA.html в div CONTENT, когда я нажимаю ссылку «b» - pageB.html и т. Д. Я пробовал whit iframe, но я знаю, что это не отличная идея, любые предложения людей? Заранее спасибо

Answer 1

Используйте функцию загрузки jQuery. Это сделает только то, что вы ищете без угловых или фреймовых наборов.

http://api.jquery.com/load/

HTML

<h1>My Website</h1> 
<div class="nav"> 
    <ul> 
     <li><a id="nav_a" href="#">Page A</a></li> 
     <li><a id="nav_b" href="#">Page B</a></li> 
    </ul> 
</div> 
<div id="content">Here's some default content (maybe Page A?)</div> 

Javascript

$(function(){ 
    $("#nav_a").on("click", function(){ 
     $("#content").load("pageA.html"); 
    }); 
    $("#nav_b").on("click", function(){ 
     $("#content").load("pageB.html"); 
    });  
}); 

Обратите внимание, что вы не сможете загружать страницы за пределами вашего домена, но не как будто вы пытаетесь это сделать.

Answer 2

Есть много способов приблизиться к этому. Я бы рекомендовал использовать AngularJS. Сначала это может показаться сложным, но оно того стоит и может легко достичь того, чего вы хотите.

<!-- include angular --> 
<script src="angular.js"></script> 

<div ng-app="app" ng-controller="main"> 

    <!-- sidebar --> 
    <a ng-click="template = 'page1.html'">Page One</a> 
    <a ng-click="template = 'page2.html'">Page Two</a> 

    <!-- content --> 
    <div ng-include="template"></div> 

</div> 

<script> 
    // define angular app 
    angular.module('app', []); 

    // define controller 
    function main ($scope) { 

    // instantiate template to show page one by default 
    $scope.template = 'page1.html'; 
    } 

    // register controller 
    angular.module('app').controller('main', main); 
</script> 

Answer 3

Если содержание от pageA.html может жить на главной странице HTML вместо этого, вы могли бы просто использовать JavaScript, чтобы показать/скрыть дивы, когда соответствующие ссылки щелкнул.

Если содержимое должно проживать на отдельных страницах HTML, то установка src на iframe с использованием JS - это, вероятно, путь.

Answer 4

Я думаю, что простой jQuery получить с Ajax проще всего. Я на моем телефоне, но это несколько строк кода до тех пор, как вы используете JQuery:

$ .get («URL-оф-content.htm», «», функция (данные) { $ ("# CONTENT"). Html (данные); );

Извините, я не предоставил больше логики для динамического поиска содержимого html, но я надеюсь, что это поможет, поскольку я использовал этот подход много с сайтами, которые уже загружают jQuery, потому что так легко вытащить внешний контент таким образом.