Javascript 动态选项卡、单个选项卡导航

我正在尝试开发一个基于jquery的动态标签。它非常有效，只要点击左侧菜单项，就会打开一个新的选项卡。但若我想在点击某个标签的链接内容时打开一个标签，那个么我就无法创建一个新的标签。基本上，链接页面在同一选项卡上过载

同样，我也上传了我的html代码和jquery代码

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

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

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

---

任何关于如何从选项卡单击链接创建选项卡的建议。

我尝试模拟您的问题，发现您没有包含css。 看到正在工作的那个了吗

---

问题是您使用的是直接链接，浏览器将使用该链接正常打开页面。如果要使用自定义JavaScript/JQuery选项卡，则必须更改链接，改为使用单击处理程序在页面中打开新选项卡，与单击导航时的方式相同。根据博客文章，这意味着您的链接需要对文档名使用rel属性，而不是href属性，并且您需要在JavaScript中分配一个单击处理程序，与对选项卡链接的分配方式相同。最好是为所有这些虚拟选项卡链接分配一个公共类，这样您就可以全局地将单击处理程序分配给该类的所有元素。

我认为如果您能够提供一个JSFIDLE代码，您将更有可能得到建设性的答案（您现在拥有的还不足以继续）。我已经用JSFIDLE链接更新了这个问题。您可能会发现这个答案很有帮助：谢谢链接。可悲的是，我无法利用它。不是我的东西

 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;}