動態創建的選項卡不起作用

我創建了一個可以創建選項卡的簡單頁面生成器。我使用JQuery UI來創建制表符動態創建的選項卡不起作用

當用戶點擊創建選項卡時，他將面對包含標題和內容的模態彈出窗口，並且在完成它們之後，他可以點擊創建選項卡（帶有#tab ID），他可以創建具有相同的形式和按鈕

JS多個標籤：

\t var num_tabs = 0; 
 
\t var elementIdforOneRound; 
 
\t var first = -1; 
 
\t $("#tab").click(function() { // fire by clicking on add button in tab modal 
 

 
\t if (first != SelectedElement) { // create tab panel 
 
\t  var item = "<div id='elem-" + elementId + "' onclick='updateSelectedElement(event," + elementId + ");'><ul></ul></div>"; 
 
\t  $(SelectedElement).append(item); // append created item to SelectedElement (selected column) 
 
\t  $("div#elem-" + elementId + "").tabs(); 
 
\t  elementIdforOneRound = elementId; 
 
\t  elementId++; 
 
\t } 
 
\t var title = document.getElementById('tb-title').value; 
 
\t var content = document.getElementById('tb-content').value; 
 
\t num_tabs = $("div#elem-" + elementIdforOneRound + " ul li").length + 1; 
 
\t $("div#elem-" + elementIdforOneRound + " ul").append(
 
\t  "<li><a href='#tab" + num_tabs + "'>" + title + "</a></li>" 
 
\t ); 
 
\t $("div#elem-" + elementIdforOneRound + "").append(
 
\t  "<div id='tab" + num_tabs + "'>" + content + "</div>" 
 
\t ); 
 
\t $("div#elem-" + elementIdforOneRound + "").tabs("refresh"); 
 
\t first = SelectedElement; 
 
\t });

的問題是，標籤，當用戶將其添加到網頁b做工精細當他導出頁面（我有一個導出按鈕，將HTML文件提供給用戶）該頁面中的選項卡不起作用。創建的標籤代碼在兩個頁面中都是相同的！

<div id="elem-1" onclick="updateSelectedElement(event,1);" class="ui-tabs ui-widget ui-widget-content ui-corner-all" style="box-shadow: rgb(185, 185, 185) 2px 2px 1px;"> 
 
    <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist"> 
 
    <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tab1" aria-labelledby="ui-id-1" aria-selected="false" aria-expanded="false"><a href="#tab1" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-1">aaaa</a> 
 
    </li> 
 
    <li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabindex="0" aria-controls="tab2" aria-labelledby="ui-id-2" aria-selected="true" aria-expanded="true"><a href="#tab2" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-2">bbbb</a> 
 
    </li> 
 
    </ul> 
 
    <div id="tab1" aria-labelledby="ui-id-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" aria-hidden="true" style="display: none;">aaaa</div> 
 
    <div id="tab2" aria-labelledby="ui-id-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" aria-hidden="false" style="display: block;">bbbb</div> 
 
</div>

注：我把創建頁面的頁面生成器頁面旁邊（正確訪問到CSS和JS文件）

來源

2015-11-05 Amir

SelectedElement是一個全局變量，用於保持當前選定列（在頁面構建器中） – Amir

你有相對路徑到你的HTML和你的CSS文件？除非HTML中的所有路徑都是網絡上某處文件的絕對路徑，否則只給用戶html無效。您需要將css和javascript與.zip文件或類似文件中的html捆綁在一起，並確保目錄結構與您的html中的CSS和JavaScript路徑對齊。然後，當用戶點擊導出按鈕時，您可以創建.zip文件並讓它們下載。 –

@AndrewMairose是的，他們是相對的，HTML文件可以訪問他們，這是讓我困惑的原因！ – Amir

由於您的HTML文件，相對路徑，給用戶剛該HTML文件將不起作用。

當您使用相對路徑時，當您嘗試引用其他文件時，瀏覽器將在HTML文件所在的目錄中查找。所以，說你有這個在<head> HTML網頁上：

<link rel="stylesheet" type="text/css" href="css/tabs.css">

瀏覽器將查找在同一目錄中的HTML文件名爲css目錄，它會試圖找到tabs.css該目錄內。

如果您的CSS文件不在瀏覽器期望的位置，那麼該CSS文件中的所有樣式都不會應用於頁面。

因此，當您的用戶只下載HTML時，他們將在其Downloads文件夾中有yoursite.html。當yoursite.html試圖加載，比如說yourcss.css，它將不會在其Downloads文件夾中找到該文件。

爲了您的導出按鈕的期望行爲的工作，你有幾種選擇：

你可以只使用任何CSS或JavaScript絕對路徑在你的HTML
你可以把你的CSS和的JavaScript代碼直接在頁面<style>和<script>標籤內

當用戶點擊導出時，可以將頁面所需的所有資源打包成zip文件等，然後讓用戶下載。

編輯：

另一種替代選擇是一起刪除導出功能，和而指導您如何使用他們的瀏覽器以獲得完整的頁面內容本身的用戶。大多數現代瀏覽器會讓您只需右鍵單擊頁面上的任意位置，然後單擊「另存爲」或「將頁面另存爲」，然後選擇目標。當您這樣做時，它會將HTML文件保存到目標位置，以及包含所有必需的CSS，javascript等的另一個文件夾。

來源

2015-11-05 20:34:37

＃3 ...是的，聲音很好:)我怎樣才能提供所有資源的捆綁給用戶？ – Amir

您很可能需要在後端執行此操作。我不認爲有一種方法可以用純JavaScript來做到這一點。您可能想爲此提出一個新問題，並且包括您用於後端的技術（如果有的話）。 –

動態創建的選項卡不起作用

回答

相關問題