Javascript 如何使用 Twitter Bootstrap 在按钮单击时导航到另一个页面？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12230981/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I navigate to another page on button click with Twitter Bootstrap?
提问by daydreamer
I have to render a html page residing in templates/home.html
我必须呈现一个位于 templates/home.html
I have a button in index.htmlas:
我有一个按钮index.html：
<div id="browse_app">
<button class="btn btn-large btn-info" type="button">Browse</button>
</div>
All I want to do is when I click on Browse, it takesme to home.html
我想要做的就是当我点击时Browse，它会带我到home.html
I tried to write jQueryas:
我试着写成jQuery：
// onClick on 'Browse' load the internal page
$(function(){
$('#browse_app').click(function(){
$.load('templates/home.html');
});
});
But this doesn't work since load needs to put data somewhere in current page
但这不起作用，因为加载需要将数据放在当前页面的某处
How do I get to the home.htmlon button click?
我如何进入home.html按钮点击？
回答by Alexander
As far as I can tell you are using Twitter Bootstrap. The documentation for Buttonsaddresses your point:
据我所知，您正在使用Twitter Bootstrap。按钮的文档解决了您的问题：
Default buttons
Button styles can be applied to anything with the
.btnclass applied. However, typically you'll want to apply these to only<a>and<button>elements for the best rendering.
默认按钮
按钮样式可以应用于应用了
.btn类的任何东西。但是，通常您只想将这些应用于<a>和<button>元素以获得最佳渲染效果。
This is what you want:
这就是你想要的：
<div id="browse_app">
<a class="btn btn-large btn-info" href="templates/home.html">Browse</a>
</div>
In the worst case scenario, this way the rendering of the button won't look nice but the link will work. Using JS, your worst case scenario will render the link useless.
在最坏的情况下，这样按钮的渲染看起来不太好，但链接可以工作。使用 JS，最坏的情况会使链接变得无用。
回答by Slipoch
Use: onclick="window.location='INSERT HTML FILE HERE'"in your button tag
使用：在您的按钮标签中onclick="window.location='插入 HTML 文件'"
One I prepared earlier:
<button class="btn" style="text-align:inherit" onclick="window.location='./Learn/'">« About HerdMASTER 4</button>
我之前准备的一个：
<button class="btn" style="text-align:inherit" onclick="window.location='./Learn/'">« About HerdMASTER 4</button>
I wanted to go to the directory Learn from another directory in the same folder
我想转到目录 Learn from another directory in the same folder
It's a more elegant solution using the bootstrap class that is included, meaning you don't have to hack code into your page. I wish there was a bit more functionality documentation about the various classes for bootstrap as I figured this out from the above code rather than finding it by a google search.
这是使用包含的引导程序类的更优雅的解决方案，这意味着您不必在页面中编写代码。我希望有更多关于 bootstrap 各种类的功能文档，因为我是从上面的代码中发现的，而不是通过谷歌搜索找到它。
回答by Ankur
Use this:
用这个：
$(function(){
$('#browse_app').click(function(){
window.location='templates/home.html'
});
});
回答by sayed haider
Use onclick="window.open('YourPage.aspx','_self');"
使用 onclick="window.open('YourPage.aspx','_self');"
For Example:
例如：
<button type="submit" onclick="window.open('YourPage.aspx','_self');" class="btn btn-default">Your Page</button>
