我正在尝试根据 this 开发基于 jquery 的动态选项卡博客。而且效果很好,单击左侧菜单项即可打开一个新选项卡。但是,如果我想在单击选项卡中的链接内容时打开一个选项卡,那么我将无法创建新选项卡。基本上,链接页面在同一个选项卡上重载。
同样,我在 jsfiddle 中上传了我的 html 代码和 jquery 代码.
在 jsfiddle 的结果面板上,我们可以看到菜单结构。单击菜单项将打开一个选项卡,假设正在打开一个包含 index.html 内容的选项卡
现在,如果我在 index.html 中添加一个链接,单击该链接我想打开另一个选项卡,龙就在那里。选项卡的内容正在更改,但单击链接的同一个不同选项卡上的所有内容。
<a href="anotherPage.html">Click Here to Open another Tab</a>
有关如何在单击选项卡中的链接时创建选项卡的任何建议。
最佳答案
我试着模拟你的问题,发现你没有包含 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 - 动态标签,单独的标签导航,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15354159/