I want to highlight currently opening page using css styles.here is my html code

<ul class="nav" id="nav">
  <li id="home">
    <a href="home.html" data-id="home" target="ifrm">Home</a>
    <ul>
     <li><a href="item1.html" target="ifrm">item1</a></li>
     <li><a href="item2.html" target="ifrm">item2</a></li>
     <li><a href="item3.html" target="ifrm">item3</a></li>
    </ul>
  </li>
  <li id="skill"><a href="skill.html" data-id="skill" target="ifrm">Skill</a></li>
  <li id="research"><a href="research.html" data-id="research"    target="ifrm">Research</a></li>
  <li id="link"><a href="link.html" data-id="link" target="ifrm">Link</a></li>
</ul>
<iframe name="ifrm"></iframe>

It should be only change the font and background color of menu list ,witch page is loading in the iframe.

I want to highlight currently opening page using css styles.here is my html code

<ul class="nav" id="nav">
  <li id="home">
    <a href="home.html" data-id="home" target="ifrm">Home</a>
    <ul>
     <li><a href="item1.html" target="ifrm">item1</a></li>
     <li><a href="item2.html" target="ifrm">item2</a></li>
     <li><a href="item3.html" target="ifrm">item3</a></li>
    </ul>
  </li>
  <li id="skill"><a href="skill.html" data-id="skill" target="ifrm">Skill</a></li>
  <li id="research"><a href="research.html" data-id="research"    target="ifrm">Research</a></li>
  <li id="link"><a href="link.html" data-id="link" target="ifrm">Link</a></li>
</ul>
<iframe name="ifrm"></iframe>

It should be only change the font and background color of menu list ,witch page is loading in the iframe.

• javascript
• html
• css

• 1 I don't really understand what you are asking, can you rephrase your question? – serakfalcon Commented Feb 15, 2015 at 11:30
• When I click in a menu item, the page will be load in to the iframe.so I want to highlight (changing menu item's font color and background color) the menu item of which I was clicked.If I select another menu item that one should be highlight not previous one. – DnwAlgorithma Commented Feb 15, 2015 at 11:41

2 Answers 2

$(function(){
   $('li a').click(function(){
     $('li a').each(function(a){
       $( this ).removeClass('selectedclass')
     });
     $( this ).addClass('selectedclass');
   });
  
  $('ul a').click(function(){
     $('ul a').each(function(a){
      $( this ).removeClass('selectedclass')
     });
     $( this ).addClass('selectedclass');
   });
});

li a.selectedclass
{
  color:red;
  background-color:blue;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav" id="nav">
          <li id="home"><a href="home.html" data-id="home" target="ifrm">Home</a>
		  <ul>
						<li ><a href="item1.html" target="ifrm">item1</a></li>
						<li ><a	href="item2.html" target="ifrm">item2</a></li>
						<li ><a href="item3.html" target="ifrm">item3</a></li>

		  </ul>
		  
		  </li>
          <li id="skill"><a href="skill.html" data-id="skill" target="ifrm">Skill</a></li>
          <li id="research"><a href="research.html" data-id="research"    target="ifrm">Research</a></li>
          <li id="link"><a href="link.html" data-id="link" target="ifrm">Link</a></li>
        </ul>

<iframe name="ifrm"></iframe>

You need to define first a class that has required styles and then click of anchor tag remove this class from all the class and then add it to the clicked anchor tag.

Add this code in your file

<script src="https://code.jquery./jquery-1.10.2.js"></script>
<script type="text/javascript">
    $("a").click(function(){
        $("a").css("color","BLUE"); // change this color to default one
        $( this ).css( "color", "RED" ); 
    });
</script>