0

ページの読み込み時にタブを設定しましたが、完全に機能します。ただし、タブを動的に追加しようとすると、エラーが発生します

TypeError: オブジェクト [object Object] にはメソッド 'tabs' がありません

これは、jQuery UI が突然なくなったということですか? これが私のコードです 

    <script src="//code.jquery.com/jquery-1.7.2.js"></script>
<script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
  $(document).ready(function(e) {
    $('#tabs').tabs();
});
function addTab(){
$('#tabs ul').append('<li><a href="#haha">HaHaHa</a></li>');
$('#tabs').append('<div id="haha">This is the new tab</div>');
$("div#tabs").tabs("refresh");
</script>
<body>
   <div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</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>
</body>

関数「addTab()」はエラーになります。どんな助けでも大歓迎です。前もって感謝します。

4

2 に答える 2

0

問題は、閉じかっこを忘れたことにある可能性があります。次のコードは完全に機能します。

<html>
    <head>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/ui-lightness/jquery-ui.min.css" />

        <script src="http://code.jquery.com/jquery-1.7.2.js"></script>
        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
        <script>
            $(document).ready(function(e) {
                $('#tabs').tabs();
            });

            function addTab(){
                $('#tabs ul').append('<li><a href="#haha">HaHaHa</a></li>');
                $('#tabs').append('<div id="haha">This is the new tab</div>');
                $("div#tabs").tabs("refresh");
            }
        </script>
    </head>
    <body>
        <a href="#" onclick="addTab();">add tab</a>

        <div id="tabs">
            <ul>
                <li><a href="#tabs-1">Nunc tincidunt</a></li> 
                <li><a href="#tabs-2">xxNunc tincidunt</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>
                    yyProin 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>
    </body>  
</html>

更新:「タブの追加」リンクと css を追加しました。

于 2013-07-09T12:19:18.687 に答える
-1 
$(document).ready(function(e) {
  $('#tabs').tabs();

  $('#addTag').click(function addTab(){
    $('#tabs ul').append('<li><a href="#haha">HaHaHa</a></li>');
    $('#tabs').append('<div id="haha">This is the new tab</div>');
    $("div#tabs").tabs("refresh");
  });
});

addTag関数をトリガーする方法であるかどうかはわかりませんが、これが役立つことを願っています

于 2013-07-09T12:16:55.533 に答える