选项1

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“链接”到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");
    });
});

在这种情况下，您的网址的href值应始终为“＃”，如果您希望其显示关于网页，则应为其提供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
    });
});

您可以阅读on this page以了解Bootstrap是如何做到的，因此您无需自己编写。

Answer 2

如果你想要做的只是将你的内容全部放在一个页面上，那么它就像你在你的例子中一样简单。这是一个链接，显示了您想要的工作版本。

Refer this JsFiddle by jaketaylor

不确定您是否注意到它，但在模板中，所有导航栏链接都指向＃...这是索引页面的顶部。

我刚刚通过添加部分名称来改变这一点。

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

Bootstrap：多页（div）和导航栏

3 个答案:

选项1

选项2