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

Question

我必须渲染一个驻留在templates/home.html

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

Answer 4

使用onclick =＆＃34; window.open（＆＃39; YourPage.aspx＆＃39;，＆＃39; _self＆＃39;）;＆＃34;

例如：

<button type="submit" onclick="window.open('YourPage.aspx','_self');" class="btn btn-default">Your Page</button>