Jquery 選項卡導航無法正常工作

Question

這是代碼：

<!DOCTYPE html>

<html> 
   <body> 
    <div data-role="tabs"> 

        <div data-role="navbar"> 
          <ul> 
           <li><a href="#tabone" >one</a></li> 
           <li><a href="#tabtwo">two</a></li> 
          </ul> 
         </div> 
         
         <div id="tabone" class="ui-content"> 
         <h1>First tab contents</h1>
          <a href="index.html" style="text-decoration: none"><button class="ui-btn ui-icon-arrow-l ui-btn-icon-left">Go back to page 1</button>
          </a>
         </div> 
         
         <div id="tabtwo" class="ui-content"> 
          <h1>Second tab contents</h1> 
         </div> 
         
    </div> 
     
</body>

我不確定它出了什么問題，我嘗試了幾種不同的排列方式，但結果如下圖所示。 任何幫助將不勝感激！

Answer 1

考慮以下基於 Demo 的示例： https://jqueryui.com/tabs/

 $(function() { $("div[data-role='tabs']").tabs(); });

 <link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script> <div data-role="tabs"> <ul data-role="navbar"> <li><a href="#tabone">one</a></li> <li><a href="#tabtwo">two</a></li> </ul> <div id="tabone" class="ui-content"> <h1>First tab contents</h1> <a href="index.html" style="text-decoration: none"><button class="ui-btn ui-icon-arrow-l ui-btn-icon-left">Go back to page 1</button></a> </div> <div id="tabtwo" class="ui-content"> <h1>Second tab contents</h1> </div> </div>

Jquery 選項卡導航無法正常工作

問題描述

1 個解決方案

解決方案1
0 2022-02-26 16:59:57

Jquery 選項卡導航無法正常工作

問題描述

1 個解決方案

解決方案1 0 2022-02-26 16:59:57

解決方案1
0 2022-02-26 16:59:57