javascript - How to change the current link color in navigation bar -

How can I specify a background color for the link "block" in my navigation bar which is currently selected (Clicks Already done)?

The idea is that this navigation bar is at the top of the page and because the link is targeted to the iframe, the main index does not refresh the HTML. I have no way to solve this. Can it be done with CSS or do I need a javascript or something for it?

Thanks in advance!

HTML:

  & lt; Table & gt; & Lt; TR & gt; & Lt; TD & gt; & Lt; Div class = "menuint" & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; A href = "page1.html" target = "ifrm" & gt; & Lt; H1 & gt; LINK 1 & lt; / H1> & Lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "page2.html" target = "ifrm" & gt; & Lt; H1 & gt; LINK 2 & lt; / H1> & Lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "page3.html" target = "ifrm" & gt; & Lt; H1 & gt; LINK 3 & lt; / H1> & Lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "page4.html" target = "ifrm" & gt; & Lt; H1 & gt; LINK 4 & lt; / H1> & Lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "page 5.html" target = "ifrm" & gt; & Lt; H1 & gt; LINK 5 & lt; / H1> & Lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "page6.html" target = "ifrm" & gt; & Lt; H1 & gt; LINK 6 & lt; / H1> & Lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt; & Lt; / TD & gt; & Lt; / TR & gt; & Lt; / Table & gt;  

and CSS:

 . Menuuint ul {list-style-type: none; Margin: 0; Padding: 0; Hidden flurry; }. Menuuint li {float: left; Padding: 0 px 0 px 0 px 1 px; Background color: # 414141; Limit: 1px solid black; Border-right-style: none; Border-top style: none; Border bottom style: None; }. Menuuint a: link, a: visited {display: block; Width: 127px; Padding: 6px 0px 6px 0px; Text-decoration: None; / * Background-image: url ("img / TESTbgrsmall.png"); * /}. Menuuint a: Hover, A: active {background color: # 7A991A; } H1 {color: #FFFFFF; Text-transform: uppercase; font-weight: bold; Text-decoration: None; Font-size: 18px; Letter-spacing: 0 pixels; }  

Demo:

Here's my suggestion to use your code And note

Data-id and how it is used with $ ("#" + $ (this). Data (' Id '))

  .navba R #nav & gt; Active & gt; A {color: red; background color: green}  

  & Lt; script src = "https://ajax.googleapis.com /ajax/libs/jquery/1.11.1/jquery.min.js"></script>? div class =" navbar " & Gt; & lt; div class = "navbar-fixed-top" & gt; div class = "container" style = "width: auto;" & gt; & lt; Div class = "nav-collapse" id = "nav-collapse" & gt; & Lt; Ul class = "nav" id = "nav" & gt; & Lt; Li id = "home" & gt; & Lt; A href = "home.html" data-id = "home" target = "ifrm" & gt; Home & lt; / A & gt; & Lt; / Li & gt; & Lt; Li id = "skill" & gt; & Lt; A href = "skill.html" data-id = "skill" target = "ifrm" & gt; Skills & lt; / A & gt; & Lt; / Li & gt; & Lt; Li id = "research" & gt; & Lt; A href = "research.html" data-id = "research" target = "ifrm" & gt; Research & lt; / A & gt; & Lt; / Li & gt; & Lt; Li id = "link" & gt; & Lt; A href = "link.html" data-id = "link" target = "ifrm" & gt; Link & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Iframe name = "ifrm" & gt; & Lt; / Iframe & gt;