动态标签，个别标签导航

问题描述：

我想开发一个基于jQuery的动态标签，跟随this博客。它的作用很大，点击一个左侧菜单项时，它正在打开一个新选项卡。但是，如果我想打开一个选项卡，单击链接内容从一个选项卡，然后我无法创建一个新的选项卡。基本上，链接页面在同一个选项卡上超载。动态标签，个别标签导航

对于相同的我已经上传我的HTML代码和jQuery代码在jsfiddle。

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

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

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

任何建议如何从一个选项卡中的链接点击创建标签。

我想你会更容易得到答案，建设性的，如果你能提供你的代码的的jsfiddle（你有什么权利现在是不是真的够去）。 – ASGM 2013-03-12 11:24:48

我用jsfiddle链接更新了这个问题。 – abhi 2013-03-13 06:28:02

您可能会发现这个答案有帮助： http://*.com/questions/3690812/capture-click-on-div-surrounding-an-iframe – 2013-03-13 07:02:47

答

我试图模拟你的问题，发现你没有包含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;}

答

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

普通班，听起来很酷，我会尝试一下 – abhi 2013-03-14 15:19:06

答

您应该添加一个名为“target”的属性并将该值设置为“空白”。例子下面

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

动态标签，个别标签导航

相关推荐