Javascript ИБК и навигации (без фреймов)

Я ввожу внешние HTML файлы с помощью JQuery, как это:Javascript ИБК и навигации (без фреймов)

$("#header").load("header.html"); 

$("#content").load("home.html"); 

$("#footer").load("footer.html");

И в HTML:

<html> 
    ... 
    <body> 

     <div id="header"></div> 

     <div id="content"></div> 

     <div id="footer"></div> 


    </body> 
</html>

То, что я хочу быть в состоянии сделать также должно иметь следующее:

Импортировать Nav:

$ ("# hav"). Load ("nav.html");

В:

<div id="nav"></div>

Так что я бы:

<html> 
    ... 
    <body> 

     <div id="header"></div> 
     <div id="nav"></div> 

     <div id="content"></div> 

     <div id="footer"></div> 


    </body> 
</html>

Навигационный импорт будет выглядеть следующим образом:

<ul> 
    <li><a href="home.html">Home</a></li> 
    <li><a href="about.html">About</a></li> 
    <li><a href="contact.html">Contact</a></li> 
</ul>

Теперь это твердая часть ...

Мне нужны страницы с навигационной панели для открытия в области содержимого, но мне нужно, чтобы верхний и нижний колонтитулы оставались загруженными, как они есть, и только область содержимого для изменения.

Как это сделать без iframe или угловых (как я знаю, угловой может это сделать).

источник

2016-06-17 Satch3000

Я не проверял это, но вот способ, который может сработать.

$('#nav').on('click', 'li a', function(evt) { 
    evt.preventDefault(); 
    var href = $(this).attr('href'); 
    $('#content').load(href); 
});

Слушателя добавляется #nav только потому, что элемент существует в то время, когда слушатель сделал, но это на самом деле прослушивать любые ые элементы детей, установки селектора.

preventDefault() предназначен для предотвращения обычной навигации. Если это не сработает, вы можете попробовать то же самое со ссылкой только на внешний вид. (например, <span class="linkLike" data-href="about.html">About</span>)

источник

2016-06-17 21:23:29 Katana314

Хороший ответ. Но переменная 'href' не должна загружать' attr ('href') '? – mrlew

ОК, пробовал это, и хотя там, где нет ошибок, навигатор не вводит код или вообще ничего не делает – Satch3000

@mrlew Упс. Да, скопируйте это из чего-то, не изменяя эту часть. Satch, если вы прямо скопировали мой код, измените id на href. Также используйте вкладку «Инструменты разработчика», чтобы убедиться, что она не выполняет фактическую навигацию по клику. – Katana314

Javascript ИБК и навигации (без фреймов)

ответ

Смежные вопросы