1

I am trying to develop a jquery based dynamic tabs following this blog. And it works greatly, on click of a left hand side menu item it is opening a new tab. But if i want to open a tab on click of the link content from a tab, then i am being unable to create a new tab. Basically the linked page is getting overloaded on the same tab.

For the same i have uploaded my html code and jquery code in jsfiddle.

On the result panel of the jsfiddle we can see the menu structure. On click of the menu item it will open a tab, say a tab is being opened containing contents of index.html

Now if in the index.html i add a link, on click of which i want open another tab and there lies the dragon for me. The contents of the tab is getting changed, but everything on the same vary tab from which the link was clicked.

 <a href="anotherPage.html">Click Here to Open another Tab</a>

Any suggestions how to create the tab on click of the link from a tab.

abhi
  • 4,762
  • 4
  • 29
  • 49
  • I think you would be more likely to get constructive answers if you could provide a jsfiddle of your code (what you have right now isn't really enough to go on). – ASGM Mar 12 '13 at 11:24
  • i have updated the question with jsfiddle link. – abhi Mar 13 '13 at 06:28
  • You might find this answer helpful: http://stackoverflow.com/questions/3690812/capture-click-on-div-surrounding-an-iframe – Vimal Stan Mar 13 '13 at 07:02
  • thanks for the link. Sadly i am unable to take any advantage of it. Not my stuff – abhi Mar 13 '13 at 07:10

2 Answers2

1

I tried to simulate your problem and found out that, you didn't include the css. See the working one on JSFIDDLE.NET

 body { font-family:Lucida Sans, Lucida Sans Unicode, Arial, Sans-Serif; font-size:13px; margin:0px auto;}
    #tabs { margin:0; padding:0; list-style:none; overflow:hidden; }
    #tabs li { float:left; display:block; padding:5px; background-color:#bbb; margin-right:5px;}
    #tabs li a { color:#fff; text-decoration:none; }
    #tabs li.current { background-color:#e1e1e1;}
    #tabs li.current a { color:#000; text-decoration:none; }
    #tabs li a.remove { color:#f00; margin-left:10px;}
    #content { background-color:#e1e1e1;}
    #content p { margin: 0; padding:20px 20px 100px 20px;}

    #main { width:900px; margin:0px auto; overflow:hidden;background-color:#F6F6F6; margin-top:20px;
         -moz-border-radius:10px;  -webkit-border-radius:10px; padding:30px;}
    #wrapper, #doclist { float:left; margin:0 20px 0 0;}
    #doclist { width:150px; border-right:solid 1px #dcdcdc;}
    #doclist ul { margin:0; list-style:none;}
    #doclist li { margin:10px 0; padding:0;}
    #documents { margin:0; padding:0;}

    #wrapper { width:700px; margin-top:20px;}

    #header{ background-color:#F6F6F6; width:900px; margin:0px auto; margin-top:20px;
         -moz-border-radius:10px;  -webkit-border-radius:10px; padding:30px; position:relative;}
    #header h2 {font-size:16px; font-weight:normal; margin:0px; padding:0px;}
Imtiaz
  • 2,484
  • 2
  • 26
  • 32
1

The issue is that you're using a direct link, which the browser will use to open a page as normal. If you want to use your custom JavaScript/JQuery tabs, you'll have to change your link to instead use a click handler that opens a new tab within the page, the same way it does when you click the navigation. Based on the blog post, that means your link needs to use the rel attribute for the document name rather than the href attribute, and you'll need to assign a click handler in your JavaScript the same way it does for the tab links. You would probably be best served by assigning a common class to all of these virtual tab links so you can assign the click handler to all elements with that class globally.

Adrian
  • 42,911
  • 6
  • 107
  • 99