在另一种情况：重点必须被点击两次

这么多的斗争，以解决这个问题之一：我有一个导航菜单包括"a href="#project" project /a"靶向另一section。我希望这"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>

http://jsfiddle.net/JHLN4/47/

来源

2017-04-15 Winel Sutanto

如果你并不反对使用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，以确保它适应新的类。我还在HTML结构中添加了一个类project，以便在单击另一个a标记时更容易地移除该类。

请参见下面的完整结构（neatened）：

$('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>

来源

2017-04-15 09:16:15 Frits

由于它的作品！ –

很高兴我能帮忙:) – Frits

在另一种情况：重点必须被点击两次

回答

相关问题