一个简易tabs标签页，只需创建该类的实例，按需传入配置即可在页面上创建
目前為
此腳本不應該直接安裝，它是一個供其他腳本使用的函式庫。欲使用本函式庫，請在腳本 metadata 寫上： // @require https://update.gf.qytechs.cn/scripts/517538/1484731/DynamicTabs_gz.js
一个简易Tabs标签页，只需创建该类的实例，按需传入选项卡配置即可在页面上创建， 支持设置自定义样式
// 示例选项卡配置
const tabsConfig = [
{id: 'tab1', title: '选项卡1', content: '<p>这是选项卡1的内容。</p>'},
{id: 'tab2', title: '选项卡2', content: '<p>这是选项卡2的内容。</p>'},
{id: 'tab3', title: '选项卡3', content: '<p>这是选项卡3的内容。</p>'},
];
// 自定义样式和事件处理类名
const options = {
styles: `
/* 自定义样式 */
.my-custom-tab-button {
font-size: 16px;
}
.my-custom-tab-content {
background-color: #f9f9f9;
}
`,
classes: {
tabButton: 'my-custom-tab-button',
tabButtonActive: 'my-custom-tab-button-active',
tabContent: 'my-custom-tab-content',
tabContentActive: 'my-custom-tab-content-active'
},
backgroundColor: '#eee',
borderColor: '#ddd',
textColor: '#333',
fontWeight: 'bold',
activeBackgroundColor: '#0056b3',
activeTextColor: '#fff',
contentBorderColor: '#bbb',
contentBackgroundColor: '#ffffff',
onTabClick: (tabId, content) => {
console.log(`Clicked tab with ID: ${tabId}`);
console.log(`Content: ${content}`);
}
};
// 创建动态选项卡实例
try {
const dynamicTabsGz = new DynamicTabs_gz('#tabs-container', tabsConfig, options);
//手动切换激活的选项卡
dynamicTabsGz.activateTab("tab3");
} catch (error) {
console.error(error.message);
}
QingJ © 2025
镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址