如何使用Twitter Bootstrap按钮点击导航到另一个页面？

Question

我必须渲染一个html页面 templates/home.html

我有一个按钮index.html:

<div id="browse_app">
    <button class="btn btn-large btn-info" type="button">Browse</button>
</div>

我想要做的就是当我点击Browse它时,它需要我home.html

我试着写作jQuery:

// onClick on 'Browse' load the internal page
$(function(){
    $('#browse_app').click(function(){
        $.load('templates/home.html');
    });
});

但这不起作用,因为加载需要将数​​据放在当前页面的某个位置

如何进入home.html点击按钮？

Answer 1

据我所知,你正在使用Twitter Bootstrap.Buttons的文档解决了你的观点:

默认按钮

按钮样式可以应用于应用.btn类的任何内容.但是,通常您只想将这些应用于<a>和<button>最佳渲染的元素.

这就是你想要的:

<div id="browse_app">
  <a class="btn btn-large btn-info" href="templates/home.html">Browse</a>
</div>

在最糟糕的情况下,这种方式的按钮渲染看起来不会很好,但链接将起作用.使用JS,您最糟糕的情况将使链接无用.

Answer 2

使用:在您的按钮标签中onclick="window.location='插入HTML文件'"

我之前准备的一个: <button class="btn" style="text-align:inherit" onclick="window.location='./Learn/'">&laquo; About HerdMASTER 4</button>

我想从同一文件夹中的另一个目录中学习目录

使用包含的引导类是一个更优雅的解决方案,这意味着您不必将代码破解到页面中.我希望有更多关于bootstrap的各种类的功能文档,因为我从上面的代码中找到了这个,而不是通过谷歌搜索找到它.

Answer 3

用这个:

$(function(){
    $('#browse_app').click(function(){
        window.location='templates/home.html'
    });
});