添加一個jQuery標籤

嗯，我是新來的jQuery和我所經歷的鮑勃·泰伯的視頻出現在http://www.learnvisualstudio.net/free/javascript-and-jquery-training/描述瞭如何安裝和使用jQuery插件..添加一個jQuery標籤

在他所教導的標籤，並通過添加標籤源代碼存在於jqueryui.com ..但jQuery的不工作的源代碼..

的jsfiddle補充說：

http://jsfiddle.net/shettyrahul8june/mf5dm/

這是兩個jQuery的代碼我堅持了.. $（「#tabs」）.tabs（）。tabs（「add」，「1。標題changed.html」，‘點擊-A-拉胡爾’）;

$("<li><a href='10.jQuery events.html'>Click-a-Rahul</a></li>").appendTo("#tabs ul"); 
$("#tabs").tabs().tabs("refresh");

正如你可以看到我試着用這兩個方法已過時增加以及較新的一個刷新..這兩個din't工作..一個加入新的標籤和造型是完美的。但有雖然是提供鏈接的新選項卡里面沒有內容..

任何幫助，將不勝感激..

而且我發現，當我使用添加方法，它適用於ID如＃tabs-3，但它不適用於鏈接...

我懂了javascript錯誤控制檯中的錯誤..

無法加載資源：否請求的資源上存在'Access-Control-Allow-Origin'標頭。因此不允許原產地'null'訪問。 file：/// E：/My%20Codes/Web%20Designing%20and%20Developing/Javascript/Javascript%20Fundamentals%20Microsoft/1.%20Title%20changed.html

XMLHttpRequest無法加載file：/// E： /My%20Codes/Web%20Designing%20and%20Developing/Javascript/Javascript%20Fundamentals%20Microsoft/1.%20Title%20changed.html。

請求的資源上不存在「Access-Control-Allow-Origin」標頭。因此不允許原產地'null'訪問。 11.Installing％20於是％20Utilising％20jQuery％20plugins.html：1

未能加載資源：服務器與無法加載的資源404（未找到）http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.17/themes/dot-luv/images/ui-bg_diagonals-thick_15_0b3e6f_40x40.png

一個狀態響應：服務器與響應404狀態（未找到）http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.17/themes/dot-luv/images/ui-bg_dots-small_20_333333_2x2.png

未能加載資源：服務器與404狀態響應（不：服務器用的404（未找到）狀態http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.17/themes/dot-luv/images/ui-bg_flat_40_292929_40x100.png

未能加載資源迴應找到）http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.17/themes/dot-luv/images/ui-bg_dots-small_40_00498f_2x2.png

問題解決了。它給跨域請求是由於..還有，我也沒有使用本地服務器來測試我的網頁..我使用WAMP和它的工作..工作的代碼存在於http://jsfiddle.net/shettyrahul8june/mf5dm/

來源

2014-01-09 rash.tay

嘗試找出錯誤的在你瀏覽器控制檯。 –

加載資源失敗：請求的資源上沒有「Access-Control-Allow-Origin」頭。因此不允許原產地'null'訪問。文件：/// E：/My%20Codes/Web%20Designing%20and%20Developing/Javascript/Javascript%20Fundamentals%20Microsoft/1.%20Title%20changed.htm –

什麼是瀏覽器使用的是？ –

 use the below code and customize as your need , please give localfile url , while working in localhost, live site url not supported , i had mentioned info.php in href ,change it to filename   
     <!DOCTYPE html> 
     <html lang="en"> 
      <head> 
     <meta charset="UTF-8" /> 
     <title>Function</title> 
     <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
     <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
     <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.17/themes/dot-luv/jquery-ui.css" /> 
     </head> 
      <body> 
     <h1 id="title">Installing and Utilising the plugins</h1> 
     <div class="demo"> 
       <div id="tabs"> 
      <ul> 
        <li><a href="#tabs-1">Nunc tincidunt</a></li> 
        <li><a href="#tabs-2">Proin dolor</a></li> 
        <li><a href="#tabs-3">Aenean lacinia</a></li> 
       </ul> 
      <div id="tabs-1"> 
        <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. 
        Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum 
        quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus 
        lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna 
        quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor 
        vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris 
        vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. 
        Phasellus ipsum. Nunc tristique tempus lectus.</p> 
       </div> 
      <div id="tabs-2"> 
        <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida 
        ante, ut pharetra massa metus id nunc. Duis scelerisque molestie 
        turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie 
        lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. 
        Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros 
        vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare 
        consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam 
        erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque 
        pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel 
        felis. Mauris consectetur tortor et purus.</p> 
       </div> 
      <div id="tabs-3"> 
        <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. 
        Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, 
        eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent 
        taciti sociosqu ad litora torquent per conubia nostra, per inceptos 
        himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. 
        Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem 
        enim, pretium nec, feugiat nec, luctus a, lacus.</p> 
        <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper 
        at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo 
        vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. 
        Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, 
        id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero 
        sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat 
        porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu 
        tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. 
        Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p> 
       </div> 
      </div> 
      </div> 
     <p><a href="http://asp.net/ajaxlibrary/CDNjQueryUI1817.ashx">Check out the themes 
      on this page</a></p> 
     </body> 
      </html> 
     <script type="text/javascript"> 
      $("#tabs").tabs(); 
      $("<li><a href='info.php'>Click-a-Rahul</a></li>").appendTo("#tabs ul"); 
     $("#tabs").tabs().tabs("refresh"); 
      </script>

來源

2014-01-09 05:57:37

不起作用..對不起.. –

我試過了，對我沒有任何問題。請檢查http://jsfiddle.net/mf5dm/1/ –

嘿你的代碼工程..但它的鏈接..我嘗試使用不同的鏈接..沒有工作..也不適用於本地文件在我的電腦.. –

的代碼在jqueryui.com工作。下面是使用他們的確切的代碼創建了一個小提琴：http://jsfiddle.net/svZrC/

使用此代碼，否則打開控制檯，可以發現錯誤，並告訴我們的錯誤是什麼。

這僅僅是JavaScript的從小提琴，看到一切小提琴......

$(function() { 
var tabTitle = $("#tab_title"), 
    tabContent = $("#tab_content"), 
    tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>", 
    tabCounter = 2; 

var tabs = $("#tabs").tabs(); 

// modal dialog init: custom buttons and a "close" callback reseting the form inside 
var dialog = $("#dialog").dialog({ 
    autoOpen: false, 
    modal: true, 
    buttons: { 
     Add: function() { 
      addTab(); 
      $(this).dialog("close"); 
     }, 
     Cancel: function() { 
      $(this).dialog("close"); 
     } 
    }, 
    close: function() { 
     form[ 0 ].reset(); 
    } 
}); 

// addTab form: calls addTab function on submit and closes the dialog 
var form = dialog.find("form").submit(function(event) { 
    addTab(); 
    dialog.dialog("close"); 
    event.preventDefault(); 
}); 

// actual addTab function: adds new tab using the input from the form above 
function addTab() { 
    var label = tabTitle.val() || "Tab " + tabCounter, 
     id = "tabs-" + tabCounter, 
     li = $(tabTemplate.replace(/#\{href\}/g, "#" + id).replace(/#\{label\}/g, label)), 
     tabContentHtml = tabContent.val() || "Tab " + tabCounter + " content."; 

    tabs.find(".ui-tabs-nav").append(li); 
    tabs.append("<div id='" + id + "'><p>" + tabContentHtml + "</p></div>"); 
    tabs.tabs("refresh"); 
    tabCounter++; 
} 

// addTab button: just opens the dialog 
$("#add_tab") 
.button() 
.click(function() { 
    dialog.dialog("open"); 
}); 

// close icon: removing the tab on click 
tabs.delegate("span.ui-icon-close", "click", function() { 
    var panelId = $(this).closest("li").remove().attr("aria-controls"); 
    $("#" + panelId).remove(); 
    tabs.tabs("refresh"); 
}); 

tabs.bind("keyup", function(event) { 
    if (event.altKey && event.keyCode === $.ui.keyCode.BACKSPACE) { 
     var panelId = tabs.find(".ui-tabs-active").remove().attr("aria-controls"); 
     $("#" + panelId).remove(); 
     tabs.tabs("refresh"); 
    } 
});

}）;

來源

2014-01-09 05:46:31 gfrobenius

這是使用按鈕..另外我將如何添加本地文件，如鏈接到另一個html文件使用此？ –

這一個不使用按鈕，它實際上使用你的代碼，它確實添加了標籤：http://jsfiddle.net/aQLNN/不知道我理解你的問題。你只是問在標籤區域如何設置內容，如鏈接？ – gfrobenius

是多數民衆贊成我說..我可以添加一個標籤。但我不能填補我的內容在該選項卡。只有當我使用id來自同一個HTML頁面，則內容是可見的。例如，如果鍵入$（「#tabs」）.tabs（）。tabs（「add」，「＃tabs-3」，「Click-a-Rahul」）; < - 內容可見..... else如果我使用$（「#tabs」）.tabs（）。tabs（「add」，「1.標題changed.html」，「Click-a-Rahul」） ; < - 像這樣，內容不是可見的 –

既然你不要一個的jsfiddle頁我不能準確的告訴怎麼回事錯了。但我可以給你一個適合我的代碼。

HTML部分

<ol id="toc"> 
     <li><a href="#page-1"><span>Customer Details</span></a></li> 
     <li><a href="#page-2"><span>Script</span></a></li> 
    </ol> 


    <div class="content" id="page-1" > 
     <p>Put page1 contents here.</p> 
    </div> 

    <div class="content" id="page-2"> 
     <p>Put page 2 contents here</p> 
    </div> 
    <script src="{{STATIC_URL}}js/activatables.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
    activatables('page', ['page-1', 'page-2']); 
    </script>

，包括這個JavaScript文件在HTML頁面中

activatables.js

https://www.assembla.com/code/irt/subversion/nodes/js/activatables.js?rev=2

get the activatable.js file from here

來源

2014-01-09 05:52:47 JTN

添加了JSFiddle ..我的問題是我可以使用jQuery add方法獲得新選項卡但我無法獲取該文件中的內容 –

您是否在另一臺服務器上執行ajax請求以獲取內容？因爲我可以看到Access-Control-Allow-Origin不存在錯誤。您需要查看跨域請求以防止該錯誤。 – JTN

跨源資源共享（CORS）是一種機制，它允許網頁上的JavaScript將XMLHttpRequest發送到另一個域，而不是JavaScript源自的域。根據相同的原產地安全策略，這種「跨域」請求否則會被網頁瀏覽器禁止。 CORS定義了瀏覽器和服務器可以交互的方式，以確定是否允許跨源請求。 – JTN

添加一個jQuery標籤

回答

相關問題