How to use HTML Anchor (A) tag in Javascript

Question

I am trying to create a tabbed page. I have the following code

<div class="profile">
    <div class="profileHR" onclick="load(this)">
        <a href="<c:url value="/secure/profileLink.htm"/>?show=changePassword"
                        target="iframeProfile">Change Password</a>
    </div>
    <div class="profileHR">
        <a href="<c:url value="/secure/profileLink.htm"/>?show=setupHours"
                        target="iframeProfile">Setup Business Hours</a>
    </div>
    <div align="center" class="profileContent">
        <iframe name="iframeProfile" src=""></iframe>
    </div>
</div>

When i click on the anchor the url is forwarded to the iframe. But i want to be able to click anywhere on the div class="profileHR" and it should forward to iframe url. So i was trying to write a javascript onclick event for div, but how do i simulate the anchor event inside a javascript?

Answer 1

Why won't you just wrap the div with the <a> anchor?

instead of <div> ... <a> </a> </div> Have this:
<a><div> ... </div></a>

No need for javascript or what so ever.

Answer 2

I prefer an onClick event

<div class="profile">
    <div class="profileHR" onclick="load(this); changeIFrame(/*whateverinfoyouneed*/);">
        Change Password
   </div>
   <div class="profileHR" onclick="changeIFrame(/*whateverinfoyouneed*/);">
        Setup Business Hours
    </div>
    <div align="center" class="profileContent">
        <iframe name="iframeProfile" src=""></iframe>
    </div>
</div>

Answer 3

<a href=somelink#frameID>whatever</a>
some content
<iframe id=frameID></iframe>

should work

Answer 4

this can be accomplished using css3

here are some links with examples and tutorials on creating this

http://www.marcofolio.net/css/sweet_tabbed_navigation_using_css3.html

http://speckyboy.com/2010/03/15/15-css3-navigation-and-menu-tutorials-and-techniques/