How to make css a:active work after the click?

Question

I am trying to make a menu working as tabs. The tabs themselves are working fine and the menu links are great aswell.. But I'd like to remove the buttom border of the active tab, to make it look like you're on that actual page. I've tried using #id a:active but it seems to work only as long as I press the link. I've had the though about doing it by javascript aswell, but I can't seem to figure out a way to do it. Here's my css for active.

CSS: (please let me know if you'll need more of my css)

#navigation a:active {
    color: #000;
    background: -webkit-gradient(linear, left top, left bottom, from(#DFE7FA), to(#FFF));
    border-bottom-width:0px;
}

Thanks, /Pyracell

Answer 1

Add and remove a class when you select a tab link..

#navigation .active {
    color: #000;
    background: -webkit-gradient(linear, left top, left bottom, from(#DFE7FA), to(#FFF));
    border-bottom-width:0px;
}

and use the script (jQuery version)

$(function(){

    $('#navigation a').click(function(){

        $('#navigation .active').removeClass('active'); // remove the class from the currently selected
        $(this).addClass('active'); // add the class to the newly clicked link

    });

});

Answer 2

From your demo link in the comments on another answer, JavaScript will not be of any help, it should be done in your PHP code. Something in the lines of:

<a <?php if (this_tab_is_selected){ ?>class='active' <?php } ?>href='LINK_TO_TAB' >
    TAB_NAME
</a>

Mentioning that changing tabs is redirecting to another page could have helped with better responses from the start xD

Depending on your code and how you are creating the tabs, you need to change the this_tab_is_selected to a code that returns true for the selected tab.

P.S. You still need to make the modification mentioned in the other answer in your CSS. (Which is to change #navigation a:active to #navigation a.active)

Answer 3

A crude way to do this with JavaScript (jQuery)

  $('a[href]').each(function() {
    if ($(this).attr('href') == window.location.pathname || $(this).attr('href') == window.location.href)
      $(this).addClass('active');
  });

Answer 4

How are you implementing the tabs; as multiple different HTML pages? The :active pseudo-class does indeed only apply when a link is 'active', which generally means 'being clicked on'. If you're implementing the tabs as multiple HTML pages, you'll probably want to assign a CSS class like "CurrentTab" to the tab representing the page the user is currently on, and apply your border-bottom-width:0px to that class.

Answer 5

the practice which is usually followed is to apply a class to your currently selected tab,e.g. class="selected" and then modify your css to target that class

#navigation a.selected

Answer 6

This is not how it works. The :active selector matches (as you noticed) a link that is currently getting clicked (= is active/working). What you want, is a selector for the active page. You will need to use a normal css class there, like this:

#navigation a:active, #navigation a.active {
    color: #000;
    background: -webkit-gradient(linear, left top, left bottom, from(#DFE7FA), to(#FFF));
    border-bottom-width:0px;
}

Answer 7

I'm a little late to the party, but I have a simple answer using css only. Give each page a unique id, give each menu item a unique id (or class in this case), style your links as you like for when you are not on the page, then style them as you want them if you are on the page. The css matches when you click on the menu item and it loads the page. So whatever page you are on, the menu item appears "active". Below I have it to where the current page menu button text changes color but you can use the visible property to show and hide images or use any css to style it. (Also in this example is css to change things on hover too.) In addition, this method allows you to write separate css for each menu button, so each menu button can do something different than the others if you wish.

#menu {
  padding-top: .5em;
  text-align: center;
  font-family: 'Merriweather Sans';
  font-size: 1.25em;
  letter-spacing: 0;
  font-weight: 300;
  color: #003300;
 }
#menu a {
  text-decoration: none;
  color: #003300;
}
#menu a:visited {
  color: #003300;
}
#menu a:hover {
  font-style: italic;
}

#home a.home, 
#about a.about,
#edc a.edc,
#presentations a.presentations,
#store a.store,
#contact a.contact {
  font-weight: 800;
  color: #660000;
}
#home a.home:hover,
#about a.about:hover,
#edc a.edc:hover,
#presentations a.presentations:hover,
#store a.store:hover,
#contact a.contact:hover
{
  font-style: normal;
}

Answer 8

Things like this need to be done with an if statement using code such as PHP.

For example if you click a link you get your new page, set a page variable, something like:

$page = "Home";

Then use an if statement to add or remove extra CSS classes/ids to chnage the style e.g.

if ($page == "home")
{
  <a href="home.php" class="active">Home</a>
  <a href="about.php">About</a>
}
else if ($page == "About")
{
  <a href="home.php">Home</a>
  <a href="about.php" class="active">About</a>
}