1

我正在尝试在此博客之后开发一个基于 jquery 的动态选项卡。它非常有效，单击左侧菜单项会打开一个新选项卡。但是，如果我想在单击选项卡中的链接内容时打开一个选项卡，那么我将无法创建新选项卡。基本上，链接页面在同一个选项卡上变得超载。

同样，我在jsfiddle中上传了我的 html 代码和 jquery 代码。

在 jsfiddle 的结果面板上，我们可以看到菜单结构。单击菜单项时，它将打开一个选项卡，例如正在打开一个包含 index.html 内容的选项卡

现在，如果在 index.html 中添加一个链接，单击该链接我想打开另一个选项卡，那里有我的龙。选项卡的内容正在发生变化，但单击链接的同一选项卡上的所有内容都不同。

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

任何关于如何通过单击选项卡中的链接来创建选项卡的建议。

4

2 回答 2

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.

于 2013-03-13T18:28:07.627 回答
1

我试图模拟你的问题，发现你没有包含 css。请参阅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;}
于 2013-03-13T18:21:56.870 回答