0

我在页面加载时设置了标签，它们运行良好。但是，当我尝试动态添加更多选项卡时，出现错误

类型错误：对象 [对象对象] 没有方法“选项卡”

这是否意味着 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");
  });
});

我创建了以下似乎可以工作的jsfiddle我不确定它是否可能是您触发 addTag 功能的方式，但我希望这会有所帮助

于 2013-07-09T12:16:55.533 回答