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

问题:

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

回答1:

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:

class='active' href='LINK_TO_TAB' >     TAB_NAME  

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)

回答2:

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      });  });

回答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');   });

回答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.

回答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

回答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; }

回答7:

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") {   Home   About } else if ($page == "About") {   Home   About }

转载请标明出处:How to make css a:active work after the click?

文章来源: How to make css a:active work after the click?