Question

<script type="text/javascript">
            $(document).ready(function(){
            $('#info a.tooltip').addClass('active');
            });
</script>

<ul class="ca-menua">
                    <li><a href="#home" class="tooltip"><span class="ca-icona">O</span></a></li>
                    <li><a href="#info" class="tooltip"><span class="ca-icona" id="info">e</span></a></li>
                    <li><a href="#komp" class="tooltip"><span class="ca-icona">S</span></a></li>
                    <li><a href="#cases" class="tooltip"><span class="ca-icona">F</span></a></li>
                    <li><a href="#kont" class="tooltip"><span class="ca-icona">@</span></a></li>
                </ul>

a.tooltip.active #info  {
    color: #f3cb12;
    font-size: 50px;
}

i’m trying to do a active link effect, but I just can’t seem to get it right.
The effect is on this link (from page 2, not the frontpage) Click here to see website.

“The active function doesn’t work. When you’re at a specific page, the navigation item for THAT page should be active.. and it doesn’t work now. – it’s so you can see WHERE you are.”

Javascript:

<script type="text/javascript">
$(function() {
    $('a.tooltip').click(function(e) {
        var $this = $(this);
        $(".ca-menua").load($this.attr('href'));
        $('a.tooltip').removeClass('active');
        $(this).addClass('active');

        // prevent default link click
        e.preventDefault();
    })
});</script>

HTML:

    <ul class="ca-menua">
               <li><a href="#home" class="tooltip"><span class="ca-icona">O</span></a></li>
               <li><a href="#info" class="tooltip"><span class="ca-icona">e</span></a></li>
               <li><a href="#komp" class="tooltip"><span class="ca-icona">S</span></a></li>
               <li><a href="#cases" class="tooltip"><span class="ca-icona">F</span></a></li>
               <li><a href="#kont" class="tooltip"><span class="ca-icona">@</span></a></li>
</ul>

CSS:

li a.tooltip.active .ca-icon {
    color: #f3cb12;
    font-size: 50px;
}

Thanks 🙂

Answer 1

On your site I’m getting an error that $ is not defined which usually means you’ve either got your code outside the $('document').ready() or you dont’ have jQuery included properly.

In fact, when I run your code manually in the console

$('a.tooltip').click(function(e) {
    var $this = $(this);
    $(".ca-menua").load($this.attr('href'));
    $('a.tooltip').removeClass('active');
    $(this).addClass('active');

    // prevent default link click
    e.preventDefault();
})

Your desired effect works (shrinking yellow icon).

You just need to put that script AFTER your jQuery include.