2012-09-01 2 views
13

Ich habe eine HTML-Seite in Wohnsitz templates/home.htmlWie navigiere ich auf eine andere Seite auf Knopfdruck mit Twitter Bootstrap?

Ich habe einen Knopf machen in index.html als:

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

Alles, was ich tun möchte, ist, wenn ich auf Browse klicken, es nimmt mich home.html

ich versuchte jQuery wie zu schreiben:

// onClick on 'Browse' load the internal page 
$(function(){ 
    $('#browse_app').click(function(){ 
     $.load('templates/home.html'); 
    }); 
}); 

Aber das funktioniert nicht, da Lastdaten muss irgendwo in der aktuellen Seite setzen

Wie kann ich auf die home.html auf die Schaltfläche klicken, erhalten? diese

+4

Warum 'nicht Browse'? Wenn Sie Bootstrap verwenden, können Sie es wie eine Schaltfläche formatieren, indem Sie dieselben CSS-Klassen verwenden. –

+0

Sie verwenden Twitter Bootstrap, richtig? – Alexander

+0

richtig !!Ich benutze Bootstrap – daydreamer

Antwort

41

Soweit ich sagen kann, das Sie verwenden Twitter Bootstrap. Die Dokumentation für Buttons Adressen Ihr Punkt:

Standardtasten

Knopf Stile können mit der .btn Klasse angewendet alles angewendet werden. In der Regel sollten Sie diese Elemente jedoch nur auf die Elemente <a> und <button> für das beste Rendering anwenden.

Dies ist, was Sie wollen:

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

Im schlimmsten Fall, auf diese Weise die Wiedergabe der Taste nicht schön aussehen, aber der Link funktioniert. Wenn Sie JS verwenden, macht Ihr Worst-Case-Szenario die Verbindung unbrauchbar.

6

Verwendung:

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

Verwendung: onclick="window.location=' INSERT HTML FILE HIER '" in Ihrem Tag button

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

ich aus einem anderen Verzeichnis im selben Ordner

in das Verzeichnis Lernen gehen wollte Es ist eine elegantere Lösung mit der Bootstrap-Klasse, die enthalten ist, was bedeutet, dass Sie nicht Code in Ihre Seite hacken müssen. Ich wünschte, es gäbe ein bisschen mehr Funktionalität Dokumentation über die verschiedenen Klassen für Bootstrap, wie ich dies aus dem obigen Code herausgefunden, anstatt es durch eine Google-Suche zu finden.

0

Verwenden Sie onclick = "window.open ('YourPage.aspx', '_ self');"

Beispiel:

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