Bootstrap：多頁（div）和導航欄

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>

但是如何從nav-tabs到divs“鏈接”？

這不起作用：

<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值應該始終為“＃”，如果您希望它顯示about頁面，您應該給它一個data-page="about" 。

選項2

在一個頁面中創建所有div，給它們一個隱藏它們的類，使用jQuery隱藏所有div但是要顯示的那個div。

<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
    });
});

您可以在此頁面上閱讀以了解Bootstrap如何執行此操作，因此您無需自己編寫。

Answer 2

如果您要做的只是將您的內容全部放在一個頁面上，那么它就像您在示例中一樣簡單。 這是一個顯示您想要的工作版本的鏈接。

由jaketaylor引用這個JsFiddle

不確定您是否注意到它，但在模板中，所有導航欄鏈接都指向＃...這是索引頁面的頂部。

我只是通過添加部分名稱來改變它。

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

如果您正在尋找，請告訴我。 如果沒有，我相信我可以提供幫助

Answer 3

Ruben Ruttens代碼對我不起作用，但給了我一個關於該怎么做的粗略想法。

這是一個工作示例：

的index.html

<a href="#" data-page="home">Home Link</a>
<a href="#" data-page="someOther">some other Link</a>
...
<div class"container" id="mainContainer"></div>

home.html的

<div>Hello World</div>

someOther.html

<div>Hello World 2</div>

main.js

$('ul.navbar-nav li a').each((i, item) => {
  if ($(item).attr('data-page')) {
    $(item).on('click', (element) => {
        $('#mainContainer').load($(element.target).attr('data-page')+'.html');
    });
  }
});