Skip to content Skip to sidebar Skip to footer
Home / Css / Html

Another Case On :focus Must Be Clicked Twice

Post a Comment
So much struggle to solve this one: I have a navigation menu consists of 'a href='#project' project /a' which target another section. I want this 'project' to change color when #

Solution 1:

If you're not adverse to using a little bit of Javascript, you could achieve the same thing using a simple class changing function.

$('nav a').click(function(){
    if ($(this).hasClass('project')) {
        $(this).addClass('active');
    } else {
        $('.project').removeClass('active');
    }
});

You can see a working fiddle here: http://jsfiddle.net/JHLN4/48/

Take note that I had to adjust your CSS rule from li a:focus to li a:focus, li a.active to make sure it accommodates the new class. I also added a class project to the HTML structure to make it easier to remove the class if another a tag is clicked.

See the full structure (neatened) below:

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

Post a Comment for "Another Case On :focus Must Be Clicked Twice"