How do I navigate to another page on button click with Twitter Bootstrap?

Question

I have to render a html page residing in templates/home.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>

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

I tried to write jQuery as:

// 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.html on button click?

Answer 1

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

Default buttons

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.

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.

Answer 2

Use: onclick="window.location='INSERT HTML FILE HERE'" in your button tag

One I prepared earlier: <button class="btn" style="text-align:inherit" onclick="window.location='./Learn/'">&laquo; About HerdMASTER 4</button>

I wanted to go to the directory 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.