simpletab是一个jQuery插件，用于创建选项卡导航，可以在网站的不同HTML页面上重复使用。

如何使用它:

1.将jQuery JavaScript库和simpletab插件的文件导入HTML页面。

<link href="/path/to/jquery.simpletabs.css" rel="stylesheet" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.simpletabs.js"></script>

2.创建一个空容器来容纳选项卡导航。

<div id="simpleTabsDemo"></div>

3.配置选项卡导航。

/* defaults: 
   tabs: [
     { id: 'demoTab1', label: 'Demo Tab 1', url: '#demoTab1'},
     { id: 'demoTab2', label: 'Demo Tab 2', url: '#demoTab2'}
   ]
*/
let tabsConfig = {
    tabs: [
      { 
        id: 'demoTab1', 
        label: 'Demo Tab 1', 
        url: 'index.html', 
        tooltip: 'Demo 1',
        tabClass: 'customTabClass',
        spacerClass: 'customSpacerClass',
      },
      // ...
    ]
};

4.初始化插件并确定每个页面的当前选项卡ID。完成。

// index.html
$('#simpleTabsDemo').simpleTabs(tabsConfig, 'demoTab1');
 
// demo2.html
$('#simpleTabsDemo').simpleTabs(tabsConfig, 'demoTab2');
 
// demo3.html
$('#simpleTabsDemo').simpleTabs(tabsConfig, 'demoTab3');

更新日志：

v1.2.3 (2022-02-23)

• 小型重构器

v1.2.2 (2022-02-21)

• 小型重构器

v1.2.1 (2021-08-13)

• JS和CSS已更新

第1.2.0节（2021-04-24）

• 将tabs[].tabClass和spacerClass添加到配置

v1.1.0 (2021-04-23)

• 添加了工具提示支持

预览截图

jQuery 跨页选项卡导航插件 simpletab