使用CSS更改所选菜单项的颜色

Question

我想使用css样式突出显示当前正在打开的页面。这是我的html代码

<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>

只能更改菜单​​列表的字体和背景颜色，巫婆页面正在iframe中加载。

Answer 1

 $(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.com/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> 

您需要首先定义一个具有所需样式的类，然后单击锚标记，将其从所有类中删除，然后将其添加到单击的锚标记中。

Answer 2

将此代码添加到文件中

<script src="https://code.jquery.com/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>