javascript - Change external html header active menu -

I have an external bootstrap navbar header that I include in every page

  & Lt; ? Php included ("header.html") ;? & Gt;  

The external header HTML file is given below:

  & lt; Body & gt; & Lt; Nav class = "navbar navbar-inverse" & gt; & Lt; Div class = "container-liquid" & gt; & Lt; Div class = "navbar-header" & gt; & Lt; Button type = "button" class = "navbar-toggle" data-toggle = "collapse" data-target = "# my newbar" & gt; & Lt; Span class = "icon-bar" & gt; & Lt; / Span & gt; & Lt; Span class = "icon-bar" & gt; & Lt; / Span & gt; & Lt; Span class = "icon-bar" & gt; & Lt; / Span & gt; & Lt; / Button & gt; & Lt; / Div & gt; & Lt; Div class = "fall navbar-fall" id = "myNavbar" & gt; & Lt; Ul class = "nav navbar-nav" & gt; & Lt; Li class = "active" & gt; & Lt; A href = "homepage.php" & gt; Home & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "aboutus.php" & gt; About us & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Event & lt; / A & gt; & Lt; / Li & gt; & Lt; Li class = "dropdown" & gt; A class = "dropdown-toggle" data-toggle = "dropdown" href = "#" & gt; Members & lt; Span class = "carat" & gt; & Lt; / Span & gt; & Lt; / A & gt; & Lt; Ul class = "dropdown menu" & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Fourth year & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Third year & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; The second year & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; 1 year & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Gallery & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; Ul class = "nav navbar-nav navbar-right" & gt; & Lt; Li id = "register" & gt; & Lt; A href = "register.php" & gt; & Lt; Span class = "glyphicon glyphione-user" & gt; & Lt; / Span & gt; Register & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; & Lt; Span class = "glyphicon glyphicon-log-in" & gt; & Lt; / Span & gt; Login & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Neo & gt;  

The problem I am facing is changing the active menu. I tried different ways but no success was found. If you have any ideas please help.

You can either send a variable via POT / PHT, set the class accordingly, or you To find the specific elements in each page, you can add a square according to the jquery and accordingly, for example

  if ($ ('(# $ (' # specific-page-element-1 ' Length) {$ ('menu-1'). AddClass ('active'); }