ul-tab是一个典型的交互组建，纯css样式是没有意义的。ului库提供了一个基本的jquery插件来实现tab的交互功能，用户也可以根据自己的需求来编写js代码实现交互功能。
如果是基本的交互功能，无论是vue、htmx等前端框架，还是原生js，都能很容易地编写。
对于ului来说，可以通过以下方式来实现tab的交互功能。
- 引入jquery和ului的js文件
- 选中tab组件的最外层容器并调用ulTab方法
<script src="//ului.top/cdn/js/jquery-3.7.1.min.js"></script>
<script src="//ului.top/cdn/js/modules/ul-tab.js"></script>
<script>
$(function () {
$('.ul-tab').ulTab();
});
</script>ul-tab.js的代码如下：
(function($) {
'use strict';
$.fn.ulTab = function(options) {
// 默认配置
var settings = $.extend({
itemClass: '.ul-tab-item',
paneClass: '.ul-tab-pane',
activeClass: 'active',
showClass: 'ul-show'
}, options);
return this.each(function() {
var $tab = $(this);
// 查找当前 tab 实例下的元素，并排除嵌套 tab 中的元素
var $tabItems = $tab.find(settings.itemClass).filter(function() {
return $(this).closest('.ul-tab').is($tab);
});
var $tabPanes = $tab.find(settings.paneClass).filter(function() {
return $(this).closest('.ul-tab').is($tab);
});
$tabItems.on('click', function() {
var $currentItem = $(this);
var index = $tabItems.index($currentItem);
// 切换选项卡的激活状态
$currentItem.addClass(settings.activeClass).siblings().removeClass(settings.activeClass);
// 切换内容面板的显示状态
if ($tabPanes.length > index) {
$tabPanes.eq(index).addClass(settings.showClass).siblings().removeClass(settings.showClass);
}
});
});
};
})(jQuery);