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');
  }
});
lia:focus,
lia.active {
  padding-top: 5px;
  max-height: 50px;
  opacity: 1;
  color: red;
}
    
#project {
  opacity: 0;
  transition: opacity 0.5s ease;
}
    
#project:target {
  opacity: 1;
}
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><body><nav><imgclass="nav_bar"src="images/navigation_stick.png"><ulclass="subsection"><liclass="subsection"><aclass="none"href="#none">Animation</a><ahref="#project"class="subsection project">Project</a></li><li><h2>Animation</h2><p>We have created a world-class</p></li></ul></nav><sectionid="project"><divclass="container"><div><divclass="list"><imgclass="back"src="images/.jpg"><articleclass="details"><h2class="details">Windows Civilization</h2><pclass="details">A projection of civilization</p><ahref=""class="button"><spanclass="butt">See Project</span></a></article></div></div></div></section></body>

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