Question

我是jQuery的新手，我正在浏览Bob tabor的http://www.learnvisualstudio.net/free/javascript-and-jquery-training/视频，介绍如何安装和使用jQuery插件。

因为他教了一下tab并通过jqueryui.com上的源代码添加一个标签..但是jquery的源代码不起作用..

JSfiddle补充道：

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

这些是我坚持的两个jQuery代码.. $（“＃tabs”）。tabs（）。tabs（“add”，“1。Title changed.html”，“Click-a-Rahul”）;

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

正如你所看到的那样，我尝试了不赞成使用的方法以及更新的刷新..两者都行不通。添加了一个新标签，样式很完美..但新内容中没有内容选项卡虽然提供了链接..

任何帮助将不胜感激..

另外我发现当我使用add方法时，它适用于id如＃tabs-3但它对链接不起作用......

我在javascript错误控制台中遇到此错误..

无法加载资源：请求的资源上没有“Access-Control-Allow-Origin”标头。因此不允许原点'null'访问。文件：/// E：/My%20Codes/Web%20Designing%20and%20Developing/Javascript/Javascript%20Fundamentals%20Microsoft/1.%20Title%20changed.html

XMLHttpRequest无法加载文件：/// 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（未找到）http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.17/themes/dot-luv/images/ui-bg_flat_40_292929_40x100.png

无法加载资源：服务器响应状态为404（未找到）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/

Answer 1

        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>

Answer 2

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" );
    }
});

}）;

Answer 3

既然你没有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>

并在您的html页面中包含此javascript文件

activatables.js

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

get the activatable.js file from here

添加jQuery选项卡

3 个答案: