Question

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

对于同样的我已经在jsfiddle上传了我的html代码和jquery代码。

在jsfiddle的结果面板上，我们可以看到菜单结构。点击菜单项后，它会打开一个标签，比如正在打开一个包含index.html内容的标签

现在，如果在index.html中我添加了一个链接，点击其中我想要打开另一个标签，那里有龙为我。选项卡的内容正在变化，但是同一个变量选项卡上的所有内容都是从中单击链接的。

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

有关如何在选项卡上单击链接创建选项卡的任何建议。

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

Answer 2

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

Answer 3

你应该添加一个名为＆＃34; target＆＃34;的属性。并将值设置为＆＃34;空白＆＃34;。以下示例

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

动态标签，单个标签导航

3 个答案: