Making links :active

Question

I've got I would say rather small problem consider with adding atribute :active to some links on my website. I wrote code where I use jquery tabs where content is loaded via #div tags

For example I click on position "Home" in my menu and its conected to div #home etc I want to make active link bold but when I use

sidemenu li a:active { font-weight:bold; }

bolded text appears only when I hold my left mouse button on it.

Is there any solution to this problem?

Links are `:active` during "[the time between the user presses the mouse button and releases it](https://developer.mozilla.org/en-US/docs/Web/CSS/:active)". You might consider using a class to indicate the current tab. — showdev, Aug 22 '14 at 00:27

Yoav Kadosh · Answer 1 · 2014-08-22T00:37:07.763

1

Use :visited instead:

.sidemenu li a:visited { font-weight:bold; }

EDIT

To make only the active tab bolded, you will need to use JavaScript. Here is an example:

HTML

<a href="#" class="tab">Tab 1</div>
<a href="#" class="tab">Tab 2</div>
<a href="#" class="tab">Tab 3</div>

JavaScript

$('.tab').click(function(){
    $('.tab').removeClass('active');
    $(this).addClass('active');
});

CSS

.active {
    font-weight: bold;
}

Here is an example.

edited Aug 22 '14 at 00:37

answered Aug 22 '14 at 00:25

Yoav Kadosh

4,807
4
39
56

I've tried and it doesn't show any effect on my link – Aug 22 '14 at 00:26
2

I wonder if `sidemenu` is one of those [new-fangled whizz-bang HTML9 elements](http://html9responsiveboilerstrapjs.com/) I've been hearing about... – Jared Farrish Aug 22 '14 at 00:26
@JaredFarrish I think its HTML10 – Oliver Spryn Aug 22 '14 at 00:27
@GPJethro Some CSS rules cannot be set for the `:visited` selector. Read: http://stackoverflow.com/a/8331950/1096470 – Yoav Kadosh Aug 22 '14 at 00:29
This will make all visited links bold, but the OP wants only the tab being viewed to be bold. – showdev Aug 22 '14 at 00:31
I've got something like this in my menu:
random name

Aug 22 '14 at 00:32

score 1 · Answer 2 · answered Aug 22 '14 at 00:36

You may need to add a class to your li in order to make it bold. If your using jQuery you could use it to toggle the class.

http://jsfiddle.net/hawaiianchimp/my3p9bc0/1/

<li class="nav"><a id="home" href="#home">Home</a></li>
<li class="nac"><a id="other" href="#other">Other</a></li>

<script>
$("li").on('click', function(){
    $("li").removeClass("active");
    $(this).toggleClass("active");
});
</script>

CSS

.active {
font-weight: bold;
}

score 0 · Answer 3 · answered Aug 22 '14 at 00:34

Jethro,

You say "bolded text only appears when I hold my left mouse button". Well, that's the intended function of :active, i.e. the mouse button is activating the link. For other mouse events, you can try the following pseudo classes:

:hover, for mouse hover
:focus, for keyboard focus

Hope that helps!

Making links :active

3 Answers3