BootStrap: Seite unter navbar aktualisieren

Question

Ich habe eine Navbar, die mit Bootstrap horizontal gebaut wird. Wenn ich eine Menüoption auswähle, möchte ich nur den Teil unterhalb der Navigationsleiste aktualisieren. Also, sagen wir ich wähle Menü 1, ich möchte nur den Teil unter der Leiste aktualisieren

Fragen 1. Wie kann ich das erreichen?
2. Wenn ich eine komplett neue Seite entwerfe und die Navbar dort habe, wird es den gleichen Effekt haben.

Answer 1

Sie können diese toggleable/Dynamic nav Tabs

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
<ul class="nav nav-tabs"> 
 
    <li class="active"><a data-toggle="tab" href="#home">Home</a></li> 
 
    <li><a data-toggle="tab" href="#menu1">Menu 1</a></li> 
 
    <li><a data-toggle="tab" href="#menu2">Menu 2</a></li> 
 
</ul> 
 

 
<div class="tab-content"> 
 
    <div id="home" class="tab-pane fade in active"> 
 
    <h3>HOME</h3> 
 
    <p>Some content.</p> 
 
    </div> 
 
    <div id="menu1" class="tab-pane fade"> 
 
    <h3>Menu 1</h3> 
 
    <p>Some content in menu 1.</p> 
 
    </div> 
 
    <div id="menu2" class="tab-pane fade"> 
 
    <h3>Menu 2</h3> 
 
    <p>Some content in menu 2.</p> 
 
    </div> 
 
</div>

mit erreichen Ja, es wird auch die gleiche Wirkung in der neu erstellten Seite haben, wenn Sie die richtige IDs verwenden.

ein normaler navbar mit togglebar Tabs

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
<nav class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <a class="navbar-brand" href="#">WebSiteName</a> 
 
    </div> 
 
    <ul class="nav navbar-nav nav-tabs"> 
 
     <li class="active"><a data-toggle="tab" href="#home">Home</a></li> 
 
     <li><a data-toggle="tab" href="#page1">Page 1</a></li> 
 
     <li><a data-toggle="tab" href="#page2">Page 2</a></li> 
 
     <li><a data-toggle="tab" href="#page2">Page 3</a></li> 
 
    </ul> 
 
    </div> 
 
    </nav> 
 
    <div class="tab-content"> 
 
    <div id="home" class="tab-pane fade in active"> 
 
    <h3>HOME</h3> 
 
    <p>Some content.</p> 
 
    </div> 
 
    <div id="page1" class="tab-pane fade"> 
 
    <h3>Menu 1</h3> 
 
    <p>Some content in menu 1.</p> 
 
    </div> 
 
    <div id="page2" class="tab-pane fade"> 
 
    <h3>Menu 2</h3> 
 
    <p>Some content in menu 2.</p> 
 
    </div> 
 
    <div id="page3" class="tab-pane fade"> 
 
    <h3>Menu 2</h3> 
 
    <p>Some content in menu 2.</p> 
 
    </div> 
 
</div>

Answer 2

Was Sie suchen, ist Ajax. Da Sie Bootstrap verwenden, verwenden Sie bereits jquery. Jquery verfügt über AJAX-Funktionen, die externen Inhalt mithilfe von Javascripting auf der Serverseite laden. Sie können also ein Inhalts-Div erstellen und anschließend Daten innerhalb dieses Divs laden und entfernen. Um etwas über Ajax zu erfahren, können Sie die Dokumentation dafür hier herunterladen Jquery ajax documentation. Und SitePoint hat hier ein ziemlich gutes Tutorial dafür SitePoint jquery ajax tutorial. Sie können dies auch googeln und viele andere Tutorials zum Einrichten von Ajax-Anrufen finden. Um Ihren Code zu testen, müssen Sie natürlich einen Server oder ein lokales Programm wie xampp verwenden.

Ein sehr einfacher Weg ist es, die jquery load Funktion zu verwenden, die ein einfacher Ajax Anruf ist und Sie können hier Jquery Load lesen. Sie können einfach Ihren Inhalt div leeren, indem Sie jquery empty verwenden, und dann den Inhalt der nächsten Seite div hineinladen.

Das gesagt von Ihrer Frage scheint es, als ob Sie nach voller Funktionalität des Zurückknopfes und des Änderns von Titeln und Sachen zu dieser Natur suchen. Dies erfordert mehr Scripting mit Hilfe der html5 History API, um die Browser-Schaltflächen für Zurück und Weiter zu bearbeiten. Um dann die Titel im Browser zu ändern, werden mehr Skripte benötigt. Auch mit Javascript deaktiviert und älteren Browsern funktioniert Ihre Website möglicherweise nicht wie erwartet.

In diesem Fall möchten Sie vielleicht in eine Ajax-Bibliothek schauen, die die Verwendung der Zurück-Schaltfläche des Browsers und die Änderung der Titel in den Tabs des Browsers und viele andere Dinge behandelt. Es gibt auch viele dieser Bibliotheken, und wenn Sie nur begrenzte Kenntnisse über Ajax haben, sollten Sie sich diese näher anschauen, da es Ihnen das Leben ein wenig erleichtern könnte. Diese Bibliotheken umfassen pjax, turbolinks und wiselinks. Ich persönlich mag wiselinks wirklich sehr. Es wird Ihnen die volle Funktionalität geben, wie Sie eine normale Seite durchsuchen, aber Inhalt von einer anderen Seite ziehen und in ein Inhalts-Div auf Ihrer Seite einfügen, anstatt die Seite neu zu laden. So können Sie Ihr Menü, Ihre Fußzeile und andere Dinge, die auf Ihrer Website gleich bleiben, wie Seitenleisten auf Ihrer Seite platzieren und dann einfach den Inhalt ersetzen. Es macht auch eine extrem schnelle Browser-Erfahrung, weil Sie nicht die ganze Seite nur Inhalt laden. Sie können wiselinks hier Wiselinks finden. Sie können mit diesem sehr leicht beginnen, schließen Sie einfach das wiselinks Javascript Ihrem Projekt ein und verbinden Sie es nach jquery.Dann Sie es mit einer Ready-Funktion auslösen kann und geben Sie Ihren Inhalt Behälter so etwas wie so:

$(document).ready(function() { 
    window.wiselinks = new Wiselinks($('#your-content-container')); 
}); 

Und Ihre Links schreiben wie so Hinzufügen des Datenattribut data-replace="true":

<a href="your-page-url.html" data-replace="true">Page Title</a> 

Auf jeden Fall hoffe ich, das alles hilft und ich denke, dass Sie möglicherweise auf allen verschiedenen Wegen nachdenken müssen, um einen Ajax-Anruf zu machen, bevor Sie entscheiden, welche Methode Sie implementieren möchten. Aber anscheinend, als ob Sie keinen Code gepostet haben und sich gefragt haben, wie Sie das überhaupt erreichen können, sollten Sie sich für eine der Ajax-Bibliotheken entscheiden. Lassen Sie mich wissen, wenn Sie Fragen im Kommentarbereich haben und viel Glück.