添加一个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标签

回答

相关问题