在另一種情況：重點必須被點擊兩次

這麼多的鬥爭，以解決這個問題之一：我有一個導航菜單包括"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

在另一種情況：重點必須被點擊兩次

回答

相關問題