Bootstrap: Несколько страниц (дивы) и NavBar

Question

я хотел бы использовать этот популярный шаблон:

http://getbootstrap.com/examples/navbar/

Я не хочу связывать с about.htm или contact.htm, это содержание должно быть внутри шаблона (несколько страниц/div).

Это должно выглядеть примерно так:

<div> 
<div id="home">home...</div> 
<div id="about">about...</div> 
<div id="contact">contact...</div> 
</div> 

Но как «связь» от СЧА закладок див?

Это не работает:

<div id="navbar" class="navbar-collapse collapse"> 
<ul class="nav navbar-nav"> 
<li class="active"><a href="#">Home</a></li> 
<li><a href="#about">About</a></li> 
<li><a href="#contact">Contact</a></li> 
</ul> 
</div> 

Большое спасибо!

Answer 1

Для этого вам необходимо использовать JavaScript.

Существует несколько способов достижения этого.

Вариант 1

Создание index.html, укажите <div class="container"> и оставьте пустым. Затем используйте jQuery для загрузки home.html в объект .container и сделайте то же самое для всех других страниц.

$(document).ready(function() { 
    $(".container").load("home.html"); 
}); 

$("ul.navbar-nav li").each(function() { 
    $(this).on("click", function{ 
     $(".container").load(($this).attr("data-page")+".html"); 
    }); 
}); 

В этом случае, стоимость вашего URL href всегда должен быть «#», и вы должны дать ему data-page="about", если вы хотите, чтобы показать страницу о.

Вариант 2

Создать все дивы на одной странице, дать им класс, который скрывает их, использовать JQuery, чтобы скрыть все дивы, но тот, который вы хотите показать.

<div class="container"> 
    <div id="home"></div> 
    <div id="about" class="hidden"></div> 
    <div id="contact" class="hidden"></div> 
</div> 

Ваш файл JavaScript:

$("ul.navbar-nav li").each(function() { 
    $(this).on("click", function{ 
     // Toggle classes of divs 
    }); 
}); 

Вы можете прочитать on this page, чтобы увидеть, как Bootstrap это делает, так что вам не придется писать самому.

Answer 2

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

Refer this JsFiddle by jaketaylor

Не уверен, что заметили ли вы это или нет, но в шаблоне все NavBar ссылки направлены на # ..., которая является верхней части страницы индекса.

Я просто изменил это, добавив названия разделов.

  <li><a href="#about">About</a></li> 
      <li><a href="#contact">Contact</a></li> 

Пожалуйста, дайте мне знать, если это то, что вы ищете. Если нет, я уверен, что смогу помочь