Setting Focus to a link using class name with Jquery

Question

Using jQuery I am trying to set focus for (CSS purposes) to a particular link from a list of related links on the load of the page based upon the class name.

Example, of the following I want to set focus to Link1

<a href="#Link1" class="nav-button-left">Link1</a>
<a href="#Link2" class="nav-button">Link2</a>
<a href="#Link3" class="nav-button">Link3</a>
<a href="#Link4" class="nav-button">Link4</a>
<a href="#Link5" class="nav-button">Link5</a>
<a href="#Link6" class="nav-button-right">Link6</a>

Currently this is the code snippet I have working so far, and by working I mean I've set it up, it does nothing noticeable so far.

<script type="text/JavaScript">
    $(window).load(function(){
        if($(this).attr("class") == 'nav-button-left'){$(".nav-button-left").focus();}  
    })
</script>

I'm fairly sure its the actual focus portion that's not working, although I can't fathom.

I suspect $(this) doesn't contain what you think it does. Also, jQuery includes a .hasClass() function, which might suit your needs better. — Olly Hodgson
– Olly Hodgson, Commented Mar 4, 2010 at 16:39

Mels · Accepted Answer · 2014-02-07 08:18:16Z

13

You can just call .focus(), you don't need the if:

$(".nav-button-left").focus();

In this code: if($(this).attr("class") == 'nav-button-left'){ the reference this has the window context, so it's evaluating false since the window doesn't have that class.

If what you're trying to do is only call it if the element exists, you're set. In the above code, if the element isn't found then .focus() just won't be called since the selector didn't find anything.

Also, unless you need stuff to load like images before this executes, just use this call:

$(function() { //equivalent to document.ready
  $(".nav-button-left").focus();
});

edited Feb 7, 2014 at 8:18

Mels

4762 silver badges17 bronze badges

answered Mar 4, 2010 at 16:32

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

웃웃웃웃웃 · Accepted Answer · 2013-09-26 04:37:12Z

2

Maybe use

$(this).hasClass(".nav-button-left")

rather than

$(this).attr("class") == 'nav-button-left'

edited Sep 26, 2013 at 4:37

웃웃웃웃웃

12k15 gold badges63 silver badges95 bronze badges

answered Oct 30, 2011 at 21:30

Randall

211 bronze badge

Collectives™ on Stack Overflow

Setting Focus to a link using class name with Jquery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related