我想使用 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>
您需要先定义一个具有所需样式的类,然后单击 anchor 标记从所有类中删除该类,然后将其添加到单击的 anchor 标记中。
关于javascript - 使用 css 更改所选菜单项的颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28525576/