如何更改选项卡式面板的布局？

我正在使用以下代码生成选项卡式面板。如何更改选项卡式面板的布局？

<!doctype html> 
    <html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <title>jQuery UI Tabs - Default functionality</title> 
     <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
     <script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
     <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
     <link rel="stylesheet" href="/resources/demos/style.css"> 
     <script> 
     $(function() { 
     $("#tabs").tabs(); 
     }); 
     </script> 
    </head> 
    <body> 

    <div id="tabs"> 
     <ul> 
     <li><a href="#tabs-1">Nunc tincidunt</a></li> 
     <li><a href="#tabs-2">Proin dolor</a></li> 
     <li><a href="#tabs-3">Aenean lacinia</a></li> 
     </ul> 
     <div id="tabs-1"> 
     <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p> 
     </div> 
     <div id="tabs-2"> 
     <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p> 
     </div> 
     <div id="tabs-3"> 
     <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p> 
     <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p> 
     </div> 
    </div> 
    </body> 
</html>

上面的代码似乎工作，但我想改变它的UI布局如下。

capture

来源

2016-01-13 Manish Kumar

这是分页标题

<li><a href="#tabs-1">Tab Ttile</a></li>

，你可以看出他是指着＃标签-1

这就是标签的数据：

<div id="tabs-1"> 
Put here what you want to show on this tab   
</div>

工作示例here

来源

2016-01-13 13:23:12 puemos

感谢您的快速回复。但其布局不同于我需要的（如图所示），就像我不需要背景栏，但在上面的例子中总是有背景栏。 –

检查此：[链接]（https://jsfiddle.net/puemos/ypqnge8h/1/）其唯一** css **工作 – puemos

谢谢它的作品！但我发现每个选项卡的宽度是固定的，但在我的情况下，A，B和C是虚拟文本，我必须编写真实的文本，并且它们的长度会有所不同，所以如何调整它们的长度。 –

如何更改选项卡式面板的布局？

回答

相关问题