刷新標籤內容不起作用的按鈕

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

搜索對谷歌這個錯誤信息顯示一個鏈接到一個以前提出的計算器問題：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); 
    }); 
});