解决这个问题非常困难：我有一个导航菜单，"a href="#project" project /a"其中包含另一个目标section。我希望"project"当#project成为目标时改变颜色。我所做的非常简单的方法是制作li a:focus {color:red;}. 它有效但必须单击两次。有什么办法可以让这个焦点一键生效？
li a:focus{
padding-top: 5px;
max-height: 50px;
opacity: 1;
color:red;
}
#project{
opacity: 0;
transition: opacity 0.5s ease;
}
#project:target{
opacity: 1;
}<body>
<nav> <img class="nav_bar" src="images/navigation_stick.png">
<ul class="subsection">
<li class="subsection"><a class="none" href="#none">Animation</a>
<a href="#project" class="subsection">Project</a>
</li>
<li>
<h2>Animation</h2>
<p>We have created a world-class</p>
</li>
</ul>
</nav>
<section id="project">
<div class="container">
<div>
<div class="list">
<img class="back" src="images/.jpg">
<article class="details">
<h2 class="details">Windows Civilization</h2>
<p class="details">A projection of civilization</p>
<a href="" class="button"><span class="butt">See Project</span></a>
</article>
</div>
</div>
</div>
</section>
</body>如果您不反对使用一点 Javascript，您可以使用一个简单的类更改函数来实现相同的目的。
$('nav a').click(function(){
if ($(this).hasClass('project')) {
$(this).addClass('active');
} else {
$('.project').removeClass('active');
}
});
你可以在这里看到一个工作小提琴：http : //jsfiddle.net/JHLN4/48/
请注意，我必须将您的 CSS 规则从 调整li a:focus到li a:focus, li a.active以确保它适应新类。我还在projectHTML 结构中添加了一个类，以便在a单击另一个标签时更容易删除该类。
请参阅下面的完整结构（整理）：
$('nav a').click(function() {
if ($(this).hasClass('project')) {
$(this).addClass('active');
} else {
$('.project').removeClass('active');
}
});li a:focus,
li a.active {
padding-top: 5px;
max-height: 50px;
opacity: 1;
color: red;
}
#project {
opacity: 0;
transition: opacity 0.5s ease;
}
#project:target {
opacity: 1;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<nav> <img class="nav_bar" src="images/navigation_stick.png">
<ul class="subsection">
<li class="subsection"><a class="none" href="#none">Animation</a>
<a href="#project" class="subsection project">Project</a>
</li>
<li>
<h2>Animation</h2>
<p>We have created a world-class</p>
</li>
</ul>
</nav>
<section id="project">
<div class="container">
<div>
<div class="list">
<img class="back" src="images/.jpg">
<article class="details">
<h2 class="details">Windows Civilization</h2>
<p class="details">A projection of civilization</p>
<a href="" class="button"><span class="butt">See Project</span></a>
</article>
</div>
</div>
</div>
</section>
</body>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句