動態創建的標簽不起作用

Question

我創建了一個可以創建選項卡的簡單頁面構建器。 我使用JQuery UI創建選項卡

當用戶單擊“創建”選項卡時，他將面對一個包含標題和內容的模式彈出窗口，完成后，他可以單擊“創建”選項卡（具有#tab ID），並且可以使用相同的表單和按鈕創建多個選項卡

JS：

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

問題是，當用戶將選項卡添加到頁面時，選項卡可以正常工作，但是當他導出頁面時（我有一個將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文件）

Answer 1

由於您的html文件具有相對路徑，因此僅向用戶提供HTML文件是行不通的。

當您使用相對路徑時，當您嘗試引用其他文件時，瀏覽器將與HTML文件位於同一目錄中。 因此，假設您在HTML頁面的<head>具有以下內容：

<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文件夾中找不到該文件。

為了使您的導出按鈕具有理想的行為，您可以選擇以下幾種方法：

您只能在HTML中使用任何CSS或JavaScript的絕對路徑
您可以將CSS和javascript代碼直接放在<style>和<script>標記內的頁面中

要么

當用戶單擊“導出”時，您可以將頁面所需的所有資源捆綁到一個zip文件或類似文件中，然后讓用戶下載。

編輯：

另一個選擇是一起刪除導出功能，而是指導用戶如何使用瀏覽器自己獲取完整頁面內容。 大多數現代的瀏覽器都允許您簡單地右鍵單擊頁面上的任意位置，然后單擊“另存為”或“另存為”，然后選擇一個目標。 當您執行此操作時，它將HTML文件保存到目標位置，以及另一個包含所有必需的CSS，javascript等的文件夾。

動態創建的標簽不起作用

問題描述

1 個解決方案

解決方案1
0 2015-11-05 20:34:37

動態創建的標簽不起作用

問題描述

1 個解決方案

解決方案1 0 2015-11-05 20:34:37

解決方案1
0 2015-11-05 20:34:37