Greasy Fork is available in English.
一个简易tabs标签页，只需创建该类的实例，按需传入配置即可在页面上创建
Questo script non dovrebbe essere installato direttamente. È una libreria per altri script da includere con la chiave // @require https://update.greasyfork.org/scripts/517538/1485921/DynamicTabs_gz.js
// 示例选项卡配置
const tabsConfig = [
//id不要重复，title也不可重复
{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 = {
// 设置标签页位置，默认为 top，可选值有 top、bottom、left、right
tabPosition: "left",
/**
* 追加自定义样式
*/
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: (id, title, content) => {
console.log(id, title, content)
},
};
// 创建动态选项卡实例
try {
const dynamicTabsGz = new DynamicTabs_gz('#tabs-container', tabsConfig, options);
//手动切换激活的选项卡
//通过标题激活选项卡
dynamicTabsGz.activateTabTitle("选项卡2");
//通过id激活选项卡
dynamicTabsGz.activateTabId("tab1");
//动态修改选项卡位置
dynamicTabsGz.setTabPosition("right");
} catch (error) {
console.error(error.message);
}