[英]Change the color of selected menu item using css
我想使用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中加載。
$(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>
您需要首先定義一個具有所需樣式的類,然后單擊錨標記,將其從所有類中刪除,然后將其添加到單擊的錨標記中。
將此代碼添加到文件中
<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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.