我在突出显示我的活动菜单项时遇到了麻烦.我正在使用CSS进行悬停,但我从其他帖子中了解到:a:active不能与CSS一起使用?
这就是我到目前为止所做的事情:
HTML
<section id="nav">
<li><a class="nav" href="editorial.html">EDITORIAL</a></li>
<li><a class="nav" href="places.html">PLACES</a></li>
<li><a class="nav" href="people.html">PEOPLE</a></li>
<li><a class="nav" href="architecture.html">ARCHITECTURE</a></li>
<li><a class="nav" href="projects.html">PROJECTS</a></li>
<li><a class="nav" href="published.html">PUBLISHED</a></li>
</section>
Run Code Online (Sandbox Code Playgroud)
CSS
#nav{
width:100%;
text-align:center;
min-width:1300px;
height:80px;
position:absolute;
top:0;
left:0;
background:#fff;
list-style:none;
border-bottom: 1px solid #000;
}
#nav li{
display:inline;
}
#nav .nav{
display:inline-block;
background-color:#000;
color:#FFF;
font-family: 'Oswald', sans-serif;
letter-spacing:1px;
font-size:16pt;
line-height:18pt;
font-weight:400;
text-decoration:none;
margin-right: 3px;
margin-left: 3px;
margin-top:35px;
padding:0px 3px 2px 3px;
}
#nav .nav:hover{
background:#FFFF00;
color:#000;
}
.active{
background:#FFFF00;
color:#000;
}
Run Code Online (Sandbox Code Playgroud)
JQUERY
<script>
$(document).ready(function() { …Run Code Online (Sandbox Code Playgroud) 我有12个html页面.单击左侧导航栏链接时会加载所有这些页面.在这里,我需要在当前链接中添加一个类,单击并加载页面.我试过这个:
$(function(){
$('#container li a').click(function(){
$('#container li a').removeClass('current');
var pathname = (window.location.pathname.match(/[^\/]+$/)[0]);
var currentPage = $(this).attr('href');
if(currentPage==pathname){
$(this).addClass('current');
}
else{
alert('wrong');
}
// alert(pathname+' currentPage: '+currentPage);
})
})
Run Code Online (Sandbox Code Playgroud)
它工作,但在页面加载,类被删除,我不知道为什么它发生..
任何帮助?