動態標籤，個別標籤導航

我想開發一個基於jQuery的動態標籤，跟隨this博客。它的作用很大，點擊一個左側菜單項時，它正在打開一個新選項卡。但是，如果我想打開一個選項卡，單擊鏈接內容從一個選項卡，然後我無法創建一個新的選項卡。基本上，鏈接頁面在同一個選項卡上超載。動態標籤，個別標籤導航

對於相同的我已經上傳我的HTML代碼和jQuery代碼在jsfiddle。

在jsfiddle的結果面板上我們可以看到菜單結構。點擊菜單項，它會打開一個標籤，說一個標籤打開包含index.html的內容

現在，如果在index.html我添加一個鏈接，點擊我想打開另一個標籤和那裏有龍的存在。該選項卡的內容正在發生變化，但同一個選項卡上的鏈接被點擊的標籤不同。

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

任何建議如何從一個選項卡中的鏈接點擊創建標籤。

來源

2013-03-12 abhi

我想你會更容易得到答案，建設性的，如果你能提供你的代碼的的jsfiddle（你有什麼權利現在是不是真的夠去）。 – ASGM 2013-03-12 11:24:48

我用jsfiddle鏈接更新了這個問題。 – abhi 2013-03-13 06:28:02

您可能會發現這個答案有幫助： http://stackoverflow.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;}

來源

2013-03-13 18:21:56 Imtiaz

問題的工作之一是，你正在使用的直接鏈接，瀏覽器將使用打開一個網頁正常。如果您想使用自定義JavaScript/JQuery選項卡，則必須將鏈接更改爲使用單擊處理程序，該選項卡會在頁面內打開一個新選項卡，其方式與單擊導航時的方式相同。根據博客文章，這意味着您的鏈接需要將rel屬性用於文檔名稱而不是href屬性，並且您需要在JavaScript中分配一個Click處理程序，就像它對Tab鏈接所做的一樣。通過爲所有這些虛擬標籤鏈接分配一個公共類，您可能會得到最佳服務，因此您可以將點擊處理程序分配給全局該類的所有元素。

來源

2013-03-13 18:28:07 Adrian

普通班，聽起來很酷，我會嘗試一下 – abhi 2013-03-14 15:19:06

您應該添加一個名爲「target」的屬性並將該值設置爲「空白」。例子下面

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

來源

2016-04-29 02:03:36 Seizefire

動態標籤，個別標籤導航

回答

相關問題