Javascript Clickable Div

I want to make an list item clickable with JS. Here is the markup:

<ul id="services">
<li>
<h2><a href="#">Transformers</a></h2>
<img src="images/transformer.jpg" alt="" />
<h3>Sub Heading</h3>
<p>content ... <a href="#">Read more</a></p>
</li>
</ul>

Code (markup):

There's a few different list items. I'm looking for a degradable, non jquery method (which is too hard then it should be to find!)

The whole list item should be clickable, and preferably be hooked with a class of "current" or similar so the styling on hover can be edited.

For how the code could work, basically for every list item inside #services, apply a class to the li on hover, and make the whole list item a link (grabbing the href from the link inside transformers).

Ideas?

 

Why don't you just wrap the whole listing with an 'a' tag? Then the whole listing block is clickable...

 

That's not valid HTML.

 

in css : a and a:hover....

 

Oh i did not know. Then i would suggest to add a onlick event to the li which calls a functuion which changes the location to the a href value

Function example:

function click_link(link_id) {
	location.href = document.getElementById(link_id).href;
}

Code (markup):

just add onclick="click_link('LINK_ID')" to the li and give the a tag the appropriate id

 

onClick is the devil.

 

Basicly use this:
<script type="text/javascript">
function pageRedirect( href )
{
window.location = href;
return false;
}
</script>

<div onClick="pageRedirect('http://www.mp3drug.com/');" style="background: #0000FF; color: #FFFFFF; width: 300px;">
Click anywere in this div! - Goes to http://www.mp3drug.com/
</div>

I added background colours etc so you can see where to click to redirect

 

with class ul.over applied on mouseover:

var linkifyULs = function(parent, classOn, classOff) {
    var parent = parent || document;
    var classOff = classOff || false;
    var uls = parent.getElementsByTagName("ul");
    
    if (!uls.length)
        return false;
    
    for (var ii = 0; ii < uls.length; ++ii) {
        var url = uls[ii].getElementsByTagName("a")[0].getAttribute("href");
        uls[ii].onclick = function(e) {
            window.location.href = url;
        };
        
        if (classOn) {
            uls[ii].onmouseover = function() {
                // to be able to restore old class on mouseout if not specific as classOff as argument...
                this.setAttribute("rel", (!classOff) ? this.className : classOff);
                this.className = classOn;
            };
            uls[ii].onmouseout = function() {
                this.className = this.getAttribute("rel");
            }
       }
    }
};
        
linkifyULs(document, "over");     

Code (javascript):

demo: http://www.jsfiddle.net/n6hNQ/2/

keep in mind that you will get event bubbling this way - if a user clicks on the second link, the click also bubbles to the event handler, which won't be a problem if both links are the same...

 

Perfect, thanks! Both links are the same so it's all good