如何使用Twitter Bootstrap单击按钮导航到另一个页面? [英] How do I navigate to another page on button click with Twitter Bootstrap?

问题描述

我必须呈现一个驻留在templates/home.html

I have to render a html page residing in templates/home.html

我在index.html中有一个按钮，为:

I have a button in index.html as:

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

我要做的就是单击Browse，它使我将带到home.html

All I want to do is when I click on Browse, it takes me to home.html

我试图将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

如何单击按钮上的home.html?

推荐答案

据我所知，您正在使用 Twitter Bootstrap . 按钮的文档解决了您的观点:

As far as I can tell you are using Twitter Bootstrap. The documentation for Buttons addresses your point:

默认按钮

按钮样式可以应用于应用了.btn类的任何样式.但是，通常您只希望将它们应用于<a>和<button>元素以获得最佳呈现.

Button styles can be applied to anything with the .btn class applied. However, typically you'll want to apply these to only <a> and <button> elements for the best rendering.

这就是您想要的:

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

在最坏的情况下，这种方式的按钮呈现效果看起来并不好，但是链接可以正常工作.使用JS，最坏的情况将使链接无用.

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.

这篇关于如何使用Twitter Bootstrap单击按钮导航到另一个页面?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！