Javascript and a Link’s Onclick Event

Headline

Javascript and a Link’s Onclick Event

Author

by Troy Grosfield

Date

September 14th, 2010

Category

Developer

Story

I was given the task of making a link appear selected once it was clicked. This needed to be done with Javascript so I thought I would share this easy snippet.

Demo

Zoom (click link to see in action):

You clicked:

Code

Html

<div class="zoom">Zoom:
  <ul>
    <li><a href="#" onclick="return setZoom(this, 7)">Past 7 days</a></li>
    <li><a href="#" onclick="return setZoom(this, 30)">Past 30 days</a></li>
    <li><a href="#" onclick="return setZoom(this, 90)">Past 3 months</a></li>
    <li><a href="#" onclick="return setZoom(this, 180)">Past 6 months</a></li>
    <li><a href="#" onclick="return setZoom(this, 365)">Past year</a></li>
  </ul>
</div>

Passing this to the setZoom function will pass the calling object to the Javascript function.

Javascript

function setZoom(t, num){
    removeZoomClass();
    $(t).addClass('sel');
    return false;
}

function removeZoomClass(){
    $('.zoom li a').removeClass('sel');
}

I’m using jQuery for the selectors and ease of use for setting and removing classes. The call to removeZoomClass() ensures that that all classes are reset once another link has been clicked so multiple links don’t appear clicked.

Using the jQuery selector, you can easily grab all child elements. The selector .zoom li a refers to all links inside the list. So, any links that have the .sel css class will be stripped of this class.

$(document).ready(function(){
    $('.zoom li a').focus(function(){
        $('.zoom li a').blur();
    });
});

Wrapping the Javascript with the $(document).ready(...) function ensures the DOM is fully loaded and the function is ready to execute.

Setting the focus event to blur will make sure the annoying dotted box doesn’t appear around your link once it’s click.

jQuery will make you’re life easier! It’s a great Javascript framework with a lot of support. If your application heavily uses Javascript and you’re not currently using jQuery, I highly recommend looking into it.

CSS

.demo .sel { color: black; text-decoration:none; }

This is the css that’s appended to the anchor once it has been clicked.

Try It Yourself!

Copy and paste the full code snippet below into your html file:

<div class="zoom">Zoom:
    <ul>
        <li><a href="#" onclick="return setZoom(this, 7)">Past 7 days</a></li>
        <li><a href="#" onclick="return setZoom(this, 30)">Past 30 days</a></li>
        <li><a href="#" onclick="return setZoom(this, 90)">Past 3 months</a></li>
        <li><a href="#" onclick="return setZoom(this, 180)">Past 6 months</a></li>
        <li><a href="#" onclick="return setZoom(this, 365)">Past year</a></li>
    </ul>
</div>
<p>You clicked:  <span id="val"></span></p>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
    function setZoom(t, num){
        removeZoomClass();
        $(t).addClass('sel');
        $('#val').html($(t).html());
        return false;
    }

    function removeZoomClass(){
        $('.zoom li a').removeClass('sel');
    }

    $(document).ready(function(){
        $('.zoom li a').focus(function(){
            $('.zoom li a').blur();
        });
    });

</script>
<style tyle="text/css">
    .sel { color: black; text-decoration:none; }
</style>

TroyGrosfield.com