Bootstrap: Çoklu sayfalar ben bu popüler şablonu kullanmak istiyorum

Question

(div'ler) ve navbar:

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

Ben about.htm veya contact.htm bağlamak istemiyoruz, bu içerik olmalı şablonun içinde (birden çok sayfa/div).

Bu şuna benzer gerekir:

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

Ama nasıl div öğelerine nav-sekmelerden "bağlantı" için?

Bu işe yaramazsa:

<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> 

çok teşekkür ederiz!

Answer 1

Bunu yapmak için JavaScript kullanmanız gerekir.

Bunu başarmanın birçok yolu vardır. 1

Seçenek bir index.html Oluştur <div class="container"> belirtmek ve bu boş bırakın. Daha sonra home.html nesnesini .container nesnesine yüklemek için jQuery'yi kullanın ve tüm diğer sayfalar için de aynısını yapın. Bu durumda

$(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'nizin href değeri her zaman "#" olmalı ve bunu ilgili sayfayı göstermek istiyorsanız bunu bir data-page="about" vermelidir.

Seçenek 2

, tek sayfada tüm div'leri oluşturun onlara bunları gizleyen bir sınıfı vermek, tüm div'leri ANCAK göstermek istediğiniz birini gizlemek için jQuery kullanmak.

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

Sizin JavaScript dosyası:

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

Sen Bootstrap bunu nasıl kendiniz yazmak zorunda kalmamak için, görmek için on this page kadar okuyabilir.

Answer 2

Yapmaya çalıştığınız tek şey içeriğinizin tümünü tek bir sayfaya koymaksa, bu örnekte gördüğünüz kadar basittir. İşte ne istediğinizin çalışan bir sürümünü gösteren bir bağlantı. Eğer navbar tüm bağlantıları fark ya da değil ama şablonda olsun

Refer this JsFiddle by jaketaylor

emin değil dizin sayfasının üst olan ... # yönlendirilmektedir.

Sadece bölüm adlarını ekleyerek bunu değiştirdim.

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

Aradığınızı bulamıyorsanız lütfen bildirin. Eğer emin değilim Eğer yardımcı olabileceğime eminim