介绍

该资源把菜单选项卡和选项组控件作为首屏主体，打开即可看到一级分组、二级标签和右侧内容预览，适合后台导航、模板市场筛选器和设置中心直接接入。

技术栈

HTML 负责模块结构，CSS 负责配色、布局和状态动画，JavaScript 负责控件切换、联动反馈和演示数据更新，双击 index.html 即可直接运行。

软件架构

• index.html：包含一级分组按钮、二级标签按钮和右侧示意预览模块。
• styles.css：负责胶囊标签、选中态、示意窗口和整体布局。
• script.js：负责分组切换、标签高亮和右侧说明联动。

安装教程

1. 解压压缩包，保持 `index.html`、`styles.css`、`script.js` 在同一目录。
2. 直接用浏览器打开 `index.html` 查看效果，无需安装依赖。
3. 如需接入现有站点，可按模块复制对应结构，并替换文案、颜色或默认数据。

使用说明

1. 先替换一级分组按钮文案，再按业务需求调整二级标签数量和名称。
2. 可把右侧预览区替换成真实业务模块，用作控制台或资源中心导航演示。
3. 如需纵向侧边菜单，可复用当前按钮状态逻辑，仅调整布局样式即可。

功能讲解

• 首屏突出菜单选项卡本体，而不是复用通用营销首页结构。
• 一级分组与二级标签可以组合使用，适合复杂资源页或后台模块页。
• 点击后会立即更新当前模块和预览信息，方便直接做下载展示图。