javascript - 如何使用 Twitter Bootstrap 在按钮单击时导航到另一个页面？

Question

我必须渲染一个驻留在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.htmlon 按钮单击？

score 47 · Accepted Answer

据我所知，您正在使用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，最坏的情况会使链接变得无用。

score 10 · Accepted Answer

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

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

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

score 7 · Accepted Answer

用这个：

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

score 0 · Accepted Answer

使用 onclick="window.open('YourPage.aspx','_self');"

例如：

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

4 回答 4