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

发布于 2025-01-10 05:20:11 字数 1078 浏览 0 评论 0原文

这是代码：

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

我不确定它出了什么问题，我尝试了几种不同的方式来安排它，但结果如下图所示。任何帮助将不胜感激！

原文

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!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

你另情深 2025-01-17 05:20:11

请考虑以下基于演示的示例： 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>

Consider the following example based on the 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>

回复收藏 0 原文

~没有更多了~