Question

所以我的主页上有多个标签..其中一个标签有一个名为“刷新”的按钮，只刷新该标签。这是我的代码：

外部脚本文件：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>      
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

标签结构：

<ul class="tabs">
    <li><a href="#sm">SM</a></li>
    <li><a href="#rm">RM</a></li>
</ul>

<div class="tab-content">
    <div class="tab" id="rm">
         //code
    </div>
    <div class="tab" id="sm">             
         <button id="refresh">REFRESH!</button>
         //code
    </div>
</div>

jquery（我已经包含在上面没有提到的外部文件中）：

$(document).ready(function(){
    $('body').on('click', '#refresh', function(){ 
        var x = $(".tabs").tabs("option", "active");        
        $(".tabs").tabs("load", x);
    });
});

每当我点击按钮时，我的控制台出现错误： Error: cannot call methods on tabs prior to initialization; attempted to call method 'option'

请帮忙！我对此很新，无法解决这个问题！

Answer 1

在Google上搜索此错误信息会显示指向先前询问的stackoverflow问题的链接：uncaught exception: cannot call methods on tabs prior to initialization

Answer 2

@KlaraNewbie，

错误表示标签尚未初始化。要初始化，请添加以下内容：

$( ".tabs" ).tabs();

之前：

$('body').on('click', '#refresh', function(){

此外，您的HTML结构不正确。尝试：

<div id="tabs">
  <ul class="tabs">
    <li><a href="#sm">SM</a></li>
    <li><a href="#rm">RM</a></li>
  </ul>
  <div class="tab" id="sm">
    a tab
  </div>
  <div class="tab" id="rm">
    <button id="refresh">REFRESH!</button>
  </div>
</div>

将脚本更改为：

$(document).ready(function(){
    $( "#tabs" ).tabs();
    $('body').on('click', '#refresh', function(){ 
        var x = $("#tabs").tabs("option", "active");        
        $("#tabs").tabs("load", x);
    });
});

用于刷新选项卡内容无效的按钮

2 个答案: