Erstellen Sie ein dynamisches Menü im Artikel von JavaScript

Hier sprechen wir nicht über DHTML-Dropdown/Pulldown-Menüs. Hier sprechen wir über ein einfaches Navigationsmenü mit JavaScript. Es identifiziert die aktive Seite und zeigt dementsprechend die Verknüpfung von den anderen Links an, wodurch es dem Benutzer einfach ist, zu navigieren. Hier verwenden wir eine einzige .JS -Datei, die für alle Seiten im Navigationsmenü verwendet wird. Sie müssen also nicht alle Seiten aktualisieren: Sie müssen nur eine JavaScript -Bibliotheksdatei (.JS -Datei) aktualisieren. Betrachten Sie beispielsweise diese 3 Navigationslinks: Link 1 ist aktiv. Link 2 ist aktiv. Link 3 ist aktiv. Wie Sie sehen können, sind dies Aufnahmen darüber, wie das Navigationsmenü auf verschiedenen Seiten angezeigt wird, je nachdem, welche Links aktiv sind. Diese Menüs werden von einer einzelnen JavaScript -Datei generiert. Es ist möglich, ein solches Menü mit nur Cascading Style Sheets (CSS) zu erstellen, indem eine Klasse (z. B. .Links) für die Menüs definiert und verschiedene Eigenschaften für .Links: aktiv zugewiesen werden. So können Sie das Menü mit einer CSS -Datei erstellen. Obwohl dies perfekt ist, gibt es hier einen Vorteil, JavaScript hier zu verwenden. Wie Sie in den oben genannten Aufnahmen sehen können, hat der aktive Link am Ende den „» “-Scharakter. Dies wird nur für den aktiven Link erstellt, daher wird es dynamisch erstellt. Mit JavaScript können Sie jedes Zeichen oder ein beliebiges ikonisches Bild verwenden, das den Link wirklich aktiv aussieht.

Durchführung

Um diese Art von Menü zu implementieren, benötigen Sie zunächst eine CSS -Datei, sagen Sie links_style.css, um die Stile für die Links zu definieren. Als nächstes kommt die JavaScript -Datei nav.js. In der Datei nav.js deklarieren wir zunächst drei Arrays. Ein Array mit dem Namen „Links“ enthält die Namen der Links. Ein weiteres Array heißt "links_text" und besteht aus dem Text der Links (z. B. Link 1). Ersteres wird zum Vergleich mit dieser Datei verwendet. Nennen Sie die verschiedenen Elemente im Links -Array mit den Titeln aus den Linkdateien, ausgenommen die Erweiterung (dh wenn der erste Link Sie zum Index.htm führt, nennen Sie es IT -Index). Das dritte Array mit dem Namen "links_url" enthält die URL, zu der ein Link den Benutzer führt. Wir wollen nun, dass wir jedes Element in den Array -Links mit dem Dateinamen der aktuellen Seite ohne die Erweiterung vergleichen können. Wir werden dem Link dann dem Link einen Stil und egal welches zusätzliche Text oder Bild zuweisen, das Sie dem Link -Text hinzufügen möchten, um die aktive Seite hervorzuheben. Sei loc die Vergleichszeichenfolge. LOC kann als: var loc = String (this.location) gefunden werden; loc = loc.split ("/"); loc = loc [Loc.Length-1] .Split ("."); loc = loc [LOC.Length-2]; Wenn also die aktuelle Seite https://www.sitepoint.com/index.htm ist, ist der LOC index. Jetzt vergleichen wir dies mit jedem Element in den Array -Links. Das erste Element dieses Arrays und Locs ist gleich. Daher schreiben wir diesen Link auf folgende Weise. document.write (' 'links_text [i]' » '); Da die anderen Elemente im Links -Array nicht gleich LOC sind, werden sie als: document.write ('

'links_text [i]'

'); Und das ist Ihr dynamisches Menü! Der Code, den Sie auf allen Seiten platzieren müssen, lautet: Platzieren Sie diesen Code, wo immer Sie das Navigationsmenü benötigen, um auf der Seite anzuzeigen. Der andere Code, den Sie benötigen, ist , das im Abschnitt Ihrer HTML -Seite platziert werden muss. Daher ist die Auflistung von 1 nav.js: / * die Linkdetails * / var links = new Array ("link1", "link2", "link3"); var links_text = new Array ("Link 1", "Link 2", "Link 3"); var links_url = new Array ("link1.htm", "link2.htm", "link3.htm"); / * Lösen Sie den Speicherort */ var loc = String (this.location); loc = loc.split ("/"); loc = loc [Loc.Length-1] .Split ("."); loc = loc [LOC.Length-2]; / * Menügenerierungsfunktion */ Funktion dyn_menu_gen () {for (var i = 0; i ' links_text[i] ' » '); } else {document.write (' 'links_text [i]' '); } document.write (''); }} / * Generieren Sie das Menü * / dyn_menu_gen (); Listing 2, links_style.css ist: .explorer {Schriftfamilie: Verdana, Arial, Helvetica; Schriftgröße: 8pt; Schriftgewicht: normal; Textdekoration: Keine; Farbe:#000000; Hintergrund:#b5d0ff; Cursor: Hand; Breite: 150px; Höhe: 30px; Grenze: 1 Solid #a6c0ed} .explorer_over {Schriftfamilie: Verdana, Arial, Helvetica; Schriftgröße: 8pt; Schriftgewicht: normal; Textdekoration: Keine; Farbe:#000000; Hintergrund:#a7c0eb; Cursor: Hand; Breite: 150px; Höhe: 30px; Grenzrechte: 1 Solid #5c6980; Grenzboden: 1 Solid #5c6980; Border-Links: 1 Solid #b8d3ff; Border-Top: 1 Solid #b8d3ff} .explorer_down {Schriftfamilie: Verdana, Arial, Helvetica; Schriftgröße: 8pt; Schriftgewicht: normal; Textdekoration: Keine; Farbe:#000000; Hintergrund:#a7c0eb; Cursor: Hand; Breite: 150px; Höhe: 30px; Border-Links: 1 Solid #5c6980; Grenze: 1 Feststoff #5c6980; Grenzrechte: 1 Solid #b8d3ff; Border-Bottom: 1 Solid #b8d3ff} .explorer_active {Schriftfamilie: Verdana, Arial, Helvetica; Schriftgröße: 8pt; Schriftgewicht: normal; Textdekoration: Keine; Farbe:#000000; Hintergrund: #ffffff; Cursor: Hand; Breite: 150px; Höhe: 30px} .Menu {Schriftfamilie: Verdana, Arial, Helvetica; Schriftgröße: 8pt; Schriftgewicht: normal; Textdekoration: Keine; Farbe:#000000} Ich hoffe, dieses Skript vereinfacht die Erstellung der dynamischen JavaScript -Navigation für Ihre Webseiten!

Häufig gestellte Fragen zum dynamischen Menü in JavaScript

Wie kann ich einem dynamischen Menü in JavaScript ein Untermenü hinzufügen?

Durch das Hinzufügen eines Untermenüs zu einem dynamischen Menü in JavaScript wird ein neues Menüelement erstellt und anschließend als Kind an das Menüelement der Eltern angewendet. Sie können die Methode appendChild () verwenden, um dies zu erreichen. Hier ist ein einfaches Beispiel:

var parentMenuitem = document.getElementById ('parentMenuitem');
var submenuitem = document.createelement ('li');
submenuitem.innerhtml = 'submenu item';
parentMenuitem.appendchild (submenuitem);
In diesem Beispiel ist 'ParentMenuitem' die ID des Menüelements, zu dem Sie ein Untermenü hinzufügen möchten. 'Submenuitem' ist das neue Untermenü -Element, das Sie hinzufügen.

Wie kann ich einen Menüelement aus einem dynamischen Menü in JavaScript entfernen?

Um ein Menüelement aus einem dynamischen Menü in JavaScript zu entfernen, können Sie die Methode removeChild () verwenden. Diese Methode beseitigt einen angegebenen untergeordneten Knoten des angegebenen Elements. Hier ist ein Beispiel:

varmenuitem = document.getElementById ('Menuitem');
Menuitem.Parentnode.removechild (Menuitem);
In diesem Beispiel ist 'Menuitem' die ID des Menüelements, den Sie entfernen möchten.

Wie kann ich den Text eines Menüelements in einem dynamischen Menü in JavaScript ändern?

Das Ändern des Textes eines Menüelements in einem dynamischen Menü in JavaScript kann mit der Innerhtml -Eigenschaft erfolgen. Hier ist ein Beispiel:

varmenuitem = document.getElementById ('Menuitem');
Menuitem.innerHtml = 'neuer Menüpunkttext';
In diesem Beispiel ist 'Menuitem' die ID des Menüelements, den Sie den Text ändern möchten, und der neue Menüpunkttext ist der neue Text, den Sie festlegen möchten.

Wie kann ich einem Menüelement in einem dynamischen Menü in JavaScript einen Ereignishörer hinzufügen?

Das Hinzufügen eines Ereignishörers zu einem Menüelement in einem dynamischen Menü in JavaScript kann mit der Methode addEventListener () erfolgen. Diese Methode erhöht einen Ereignishandler an das angegebene Element. Hier ist ein Beispiel:

varmenuitem = document.getElementById ('Menuitem');
Menuitem.AddeventListener ('Click', function () {
Alert ('Menüelement geklickt!');
});
In diesem Beispiel ist 'Menuitem' die ID des Menüelements, zu dem Sie einen Event -Listener hinzufügen möchten. Der Event -Listener zeigt eine Warnung an, wenn auf das Menüelement geklickt wird.

Wie kann ich einen Menüelement in einem dynamischen Menü in JavaScript stylen?

Das Stylen eines Menüelements in einem dynamischen Menü in JavaScript kann mit der Style -Eigenschaft erfolgen. Diese Eigenschaft setzt oder gibt die Stilattribute eines Elements zurück. Hier ist ein Beispiel:

varmenuitem = document.getElementById ('Menuitem');
Menuitem.Style.color = 'rot';
Menuitem.Style.Fontsize = '20px';
In diesem Beispiel ist 'Menuitem' die ID des Menüelements, die Sie stylen möchten. Die Style -Eigenschaft wird verwendet, um die Farbe und Schriftgröße des Menüpunkts zu ändern.

Wie kann ich mit einem Array ein dynamisches Menü in JavaScript erstellen?

Das Erstellen eines dynamischen Menüs in JavaScript mit einem Array umfasst das Iterieren über das Array und das Erstellen eines neuen Menüelements für jedes Element im Array. Hier ist ein Beispiel:

varmenuitems = ['home', 'über', 'contact'];
varmenü = document.getElementById ('Menü');

für (var i = 0; i varmenuitem = document.createelement ('li');
Menuitem.innerhtml = Menuitems [i];
Menu.AppendChild (Menuitem);
}
In diesem Beispiel ist "Menuitems" eine Reihe von Menüelementtexten, und das Menü "Menü" ist die ID des Menüs, zu dem Sie die Menüelemente hinzufügen möchten.

Wie kann ich mit JSON -Daten ein dynamisches Menü in JavaScript erstellen?

Das Erstellen eines dynamischen Menüs in JavaScript mit JSON -Daten umfasst das Parsen der JSON -Daten und das Erstellen eines neuen Menüelements für jedes Objekt in den analysierten Daten. Hier ist ein Beispiel:

var jSondata = '[{"text": "home"}, {"text": "über"}, {"text": "contact"}]';
varmenuitems = json.Parse (jSondata);
varmenü = document.getElementById ('Menü');

für (var i = 0; i varmenuitem = document.createelement ('li');
Menuitem.innerhtml = Menuitems [i] .Text;
Menu.AppendChild (Menuitem);
}
In diesem Beispiel ist 'JSondata' eine JSON -Zeichenfolge von Menüelementobjekten, und 'Menü' ist die ID des Menüs, zu dem Sie die Menüelemente hinzufügen möchten.

Wie kann ich ein dynamisches Menü in JavaScript mit Daten von einem Server erstellen?

Erstellen eines dynamischen Menüs in JavaScript Verwenden von Daten von einem Server beinhaltet die Erstellung einer AJAX -Anforderung an den Server, um die Daten abzurufen, und dann ein neues Menüelement für jedes vom Server zurückgegebene Daten zu erstellen. Hier ist ein Beispiel mit der Fetch -API:

Fetch ('https://example.com/menuitems')
.then (response => response.json ())
.then (data => {
varmenü = document.getElementById ('Menü');

für (var i = 0; i varmenuitem = document.createelement ('li');
Menuitem.innerhtml = Daten [i] .Text;
Menu.AppendChild (Menuitem);
}
});
In diesem Beispiel ist 'https://example.com/menuitems' die URL des Serverendpunkts, der die Menüelementdaten zurückgibt.

Wie kann ich in JavaScript ein dynamisches Dropdown -Menü erstellen?

Um ein dynamisches Dropdown -Menü in JavaScript zu erstellen, werden ein neues Element ausgewählt und Optionselemente für jeden Menüelement hinzugefügt. Hier ist ein Beispiel:

varmenuitems = ['home', 'über', 'contact'];
var DropdownMenu = document.createElement ('select');

für (var i = 0; i var option = document.createelement ('option');
Option.Value = Menuitems [i];
Option.Text = Menuitems [i];
DropdownMenu.AppendChild (Option);
}

document.body.appendchild (DropdownMenu);
In diesem Beispiel ist "Menuitems" eine Reihe von Menüelementtexten.

Wie kann ich in JavaScript ein dynamisches Kontextmenü erstellen?

Um ein dynamisches Kontextmenü in JavaScript zu erstellen, werden ein neues Menüelement erstellt und Menüelemente hinzugefügt und dann das Menü an der Maussposition angezeigt, wenn die rechte Maustaste klickt. Hier ist ein Beispiel:

varmenuitems = ['cut', 'kopieren', 'paste'];
var contextMenu = document.createelement ('ul');
contextMenu.style.display = 'none';
contextMenu.style.position = 'absolut';

für (var i = 0; i varmenuitem = document.createelement ('li');
Menuitem.innerhtml = Menuitems [i];
contextMenu.appendchild (Menuitem);
}

document.body.appendchild (contextMenu);

document.addeventListener ('contextMenu', Funktion (e) {
E.PreventDefault ();
contextMenu.style.left = e.Pagex 'px';
contextMenu.style.top = e.Pagey 'px';
contextMenu.style.display = 'block';
});

document.addeventListener ('klick', function () {
contextMenu.style.display = 'none';
});
In diesem Beispiel sind "Menuitems" eine Reihe von Kontext -Menüelementtexten.

Das obige ist der detaillierte Inhalt vonErstellen Sie ein dynamisches Menü im Artikel von JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!