Focus on terget div element using get

Question

I have a page that content are listed using a unique id, and i want whenever user click on links to view any of these item it will scroll down or up to locate the element with the id in the address bar foo=or2 and at the same time it will apply css focus style to that element. I have tried to do it by this but didn't work for me can anyone help with this?

Jquery code

$(document).ready(function (){
// I don't know how to get the id from url 
    $('div').focus();
// I also don't know what else to do to make it work
});

Here is my example url to focus on div element

http://www.example.com?see=orang$foo=or2

HTML EXAMPLE

    div:focus {
 background: red;   
}
<div id="or1">Orange</div>
    <div id="or2">Mango</div>
    <div id="or3">Banana</div>
    <div id="or4">Pear</div>

Possible duplicate of [How can you check for a #hash in a URL using JavaScript?](http://stackoverflow.com/questions/298503/how-can-you-check-for-a-hash-in-a-url-using-javascript) — hungerstar, Jul 08 '16 at 18:39

score 0 · Answer 1 · answered Jul 08 '16 at 18:44

It seems like an arbitrary thing to add, but if you add tabindex="-1" as a property of your divs they should be focus-able, the function only has a limited set of elements it can target without it.

This is from the .focus jQuery documentation:

The focus event is sent to an element when it gains focus. This event is implicitly applicable to a limited set of elements, such as form elements (input, select, etc.) and links (a href). In recent browser versions, the event can be extended to include all element types by explicitly setting the element's tabindex property. An element can gain focus via keyboard commands, such as the Tab key, or by mouse clicks on the element.

Focus on terget div element using get

1 Answers1