javascript - Single Page Web-App Menu Selection -


I am developing a single page web app frontend using bootstrap. I have a menu on the side of the page and I want to select any item highlighted.

HTML:

  & lt; Div class = "col-sm-3 col-md-2 sidebar" & gt; & Lt; Ul class = "nav nav sidebar" & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Get Snippet & lt; / A & gt; & Lt; / Li & gt; & Lt; Li class = "active" & gt; & Lt; A href = "#" & gt; Tag & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Rules & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Macros & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; History & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Display & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt;   

I have researched something online about how to do it, but I have only got resources, which resolved using different .html pages for each menu item. Is this a way to use javascript and only activate the current .html page?

Here I have inserted the JS snippet, but it fails to deselect other items:

  & lt; Script & gt; Var menuare = document. GetElementsByTagName ("li"); Var prevLI = ""; (Var i = 0; i & lt; menuArr.length; i ++) {menuArr [i] .onclick = function () {If (prevLI! = "" & Amp; Previous! = This) {prevLI.className = ""; } This.className = "active"; PrevLI = this; }} & Lt; / Script & gt;    

Hey, I've made an example using jsfiddle using your code: -

  var menuRAR = document. GetElementsByTagName ("li"); Var prevLI = document.getElementsByClassName ('active'); If (prevLI) prevLI = prevLI [0]; (Var i = 0; i & lt; menuArr.length; i ++) {menuArr [i] .onclick = function () {If (prevLI! = "" & Amp; Previous! = This) {prevLI.className = ""; } This.className = "active"; PrevLI = this; }}   

Working Examples:

Thanks

Comments

Popular posts from this blog

ios - Adding an SKSpriteNode to SKScene from a child SKSpriteNode -

Matlab transpose a table vector -

c# - Textbox not clickable but editable -