动态选项卡，单个选项卡导航答案

【问题标题】：Dynamic tabs, individual tab navigation动态选项卡，单个选项卡导航
【发布时间】：2013-03-12 05:45:34
【问题描述】：

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

同样，我已将我的 html 代码和 jquery 代码上传到 jsfiddle。

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

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

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

关于如何在点击标签中的链接时创建标签的任何建议。

【问题讨论】：

我认为，如果您可以提供代码的 jsfiddle（您现在所拥有的还不足以继续下去），您将更有可能获得建设性的答案。
我已经用 jsfiddle 链接更新了问题。
您可能会发现这个答案很有帮助：stackoverflow.com/questions/3690812/…
感谢您的链接。可悲的是，我无法利用它。不是我的东西

标签： javascript jquery html

【解决方案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;}

【讨论】：

【解决方案2】：

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

【讨论】：