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?

So from what I understand you're just trying to change the URL of the iFrame, with a link, correct? — Kinz, Mar 17 '12 at 22:10
Have you tried `display: block` in the CSS for the `a` element? — David Thomas, Mar 17 '12 at 22:12

score 0 · Answer 1 · answered Mar 17 '12 at 22:08

0

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.

answered Mar 17 '12 at 22:08

gdoron

147,333
58
291
367

I tried this but eclipse is saying Multiple annotations found at this line: - Invalid location of tag (div). Although it works the way i want it – user1241438 Mar 18 '12 at 00:15

score 0 · Answer 2 · answered Mar 17 '12 at 22:17

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>

score 0 · Answer 3 · answered Mar 17 '12 at 22:19

0

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

should work

answered Mar 17 '12 at 22:19

Dudeist

363
1
4
13

The issue here is, i am not able to style the way i want to decorate a
element. I am actually creating tabs
– user1241438 Mar 18 '12 at 00:18

score 0 · Answer 4 · answered Mar 17 '12 at 22:42

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/

How to use HTML Anchor (A) tag in Javascript

4 Answers4