Jquery 选项卡导航无法正常工作

Question

Here is the code:这是代码：

<!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>

I'm not sure what's going wrong with it, I've tried a couple different ways of arranging it but it just comes out like the image below.我不确定它出了什么问题，我尝试了几种不同的排列方式，但结果如下图所示。 Any help would be greatly appreciated!任何帮助将不胜感激！

Answer 1

Consider the following example based on the Demo: https://jqueryui.com/tabs/考虑以下基于 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