- UID
- 2569
- 注册
- 2024/02/22
- 消息
- 2
- 黄金
- 283G
【结尾有示例代码】
首先，这是一篇了解、创作过程的经历经验，如果你不喜欢看出门左转。
先上效果图
最近喜欢整点小工具，偶然间看到站内两位大佬 @死了算了 和 @小关 的技巧教程：关于给小工具添上选项卡的，觉得蛮有意思。
于是自己尝试来点效果，因为 @小关 是有图的，所以我就用了那份，上张那边的效果图：
可以看到
比较影响美观的就有：
1. 三个小工具的按钮不居中 舒适度不足
2. 下方小工具出现的 “最新主题” 犹如废话。
3. 移动端侧边栏 小工具按钮高度出现问题
针对以上问题，我做了什么？
1. 利用 <style> 内置 CSS样式 做出以下更改：
① 隐藏标题栏中的前置元素
② 强制标题栏高度
③ 针对活动状态对副标题做出实时更改
④ 使标题栏子元素位于 .widget-tabs.block-tabHeader.tabs.hScroller 中垂直居中
⑤ 强制标题栏定位
⑥ 透明样式美化
2. 利用 javascript 对显式链接作出屏蔽处理，对url无效跳转起到作用。
3. 使用 data-target 属性来指定各个内容面板与标签页之间的关联，而不是 aria
4. 简化了需要填入的小工具 ID
操作方法：
1. 进入后台 -- 外观 -- 小工具
点击右上角的“添加小工具”
2. 先添加好你到时候需要加入到“选项卡小工具”中的几个小工具
3. 添加好你到时候需要加入到“选项卡小工具”中的几个小工具之后，来创建这个“选项卡小工具”，这时我们进入后台--外观--小工具，点击右上角的“添加小工具”
4. “新增小工具定义”选择“HTML”
5. 小工具Key随便输入，符合规则即可
6. 标题也可以随便填
7. 选择在论坛所显示的位置
8. 启用 “高级模式” 以加强美化效果与宽度
9. 将下列代码粘贴入“模板” 框中（代码已做注释处理）：
注意！代码中需要修改的内容已用中文标注！
附上本篇文章开篇图的示例 ~
参考文献：
@死了算了 https://www.cnxfans.com/threads/292/
@小关 https://www.cnxfans.com/threads/818/
首先，这是一篇了解、创作过程的经历经验，如果你不喜欢看出门左转。
先上效果图
最近喜欢整点小工具，偶然间看到站内两位大佬 @死了算了 和 @小关 的技巧教程：关于给小工具添上选项卡的，觉得蛮有意思。
于是自己尝试来点效果，因为 @小关 是有图的，所以我就用了那份，上张那边的效果图：
可以看到
比较影响美观的就有：
1. 三个小工具的按钮不居中 舒适度不足
2. 下方小工具出现的 “最新主题” 犹如废话。
3. 移动端侧边栏 小工具按钮高度出现问题
针对以上问题，我做了什么？
1. 利用 <style> 内置 CSS样式 做出以下更改：
① 隐藏标题栏中的前置元素
② 强制标题栏高度
③ 针对活动状态对副标题做出实时更改
④ 使标题栏子元素位于 .widget-tabs.block-tabHeader.tabs.hScroller 中垂直居中
⑤ 强制标题栏定位
⑥ 透明样式美化
2. 利用 javascript 对显式链接作出屏蔽处理，对url无效跳转起到作用。
3. 使用 data-target 属性来指定各个内容面板与标签页之间的关联，而不是 aria
4. 简化了需要填入的小工具 ID
操作方法：
1. 进入后台 -- 外观 -- 小工具
点击右上角的“添加小工具”
2. 先添加好你到时候需要加入到“选项卡小工具”中的几个小工具
3. 添加好你到时候需要加入到“选项卡小工具”中的几个小工具之后，来创建这个“选项卡小工具”，这时我们进入后台--外观--小工具，点击右上角的“添加小工具”
4. “新增小工具定义”选择“HTML”
5. 小工具Key随便输入，符合规则即可
6. 标题也可以随便填
7. 选择在论坛所显示的位置
8. 启用 “高级模式” 以加强美化效果与宽度
9. 将下列代码粘贴入“模板” 框中（代码已做注释处理）：
注意！代码中需要修改的内容已用中文标注！
代码：
<div class="block">
<!-- 添加CSS样式 -->
<style>
/* 添加CSS样式 */
/* 隐藏标题栏中的前置元素 */
h2.widget-tabs.block-tabHeader.tabs.hScroller.block-minorHeader::before {
display: none;
}
/* 设置标题栏高度 */
h2.widget-tabs.block-tabHeader.tabs.hScroller.block-minorHeader {
height: 55px;
}
/* 当标签页为活动状态时，隐藏副标题 */
li.is-active > .block .block-minorHeader {
display: none !important;
}
/* 设置标签页的样式 */
.widget-tabs.block-tabHeader.tabs.hScroller.block-minorHeader {
display: flex;
justify-content: center; /* 将子元素水平居中 */
align-items: center; /* 将子元素垂直居中 */
}
/* 设置标题栏的定位 */
.block-tabHeader {
position: relative !important;
}
/* 设置标签的样式 */
.tabs-tab {
cursor: pointer;
display: inline-block;
padding: 10px 20px;
text-decoration: none;
color: black;
}
/* 设置鼠标悬停时标签的样式 */
.tabs-tab:hover {
background-color: #f0f0f0;
}
</style>
<!-- 标签页的标题栏 -->
<h2 class="widget-tabs block-tabHeader tabs hScroller block-minorHeader" data-xf-init="tabs h-scroller" data-state="replace" role="tablist" style="position: sticky; top: 0; z-index: 100;">
<span class="hScroller-scroll">
<!-- 选项卡一 -->
<a href="javascript:void(0);" class="tabs-tab is-active" role="tab" data-target="new_topics">选项卡一名称</a>
<!-- 选项卡二 -->
<a href="javascript:void(0);" class="tabs-tab" role="tab" data-target="new_resources">选项卡二名称</a>
<!-- 选项卡三 -->
<a href="javascript:void(0);" class="tabs-tab" role="tab" data-target="new_posts">选项卡三名称</a>
</span>
</h2>
<!-- 标签页的内容面板 -->
<ul class="tabPanes widget--tab">
<!-- 选项卡一内容面板 -->
<li role="tabpanel" id="new_topics" class="tab-content is-active">
<xf:widget key="选项卡一镶嵌的小工具ID"" />
</li>
<!-- 选项卡二内容面板 -->
<li role="tabpanel" id="new_resources" class="tab-content">
<xf:widget key="选项卡二镶嵌的小工具ID"" />
</li>
<!-- 选项卡三内容面板 -->
<li role="tabpanel" id="new_posts" class="tab-content">
<xf:widget key="选项卡三镶嵌的小工具ID"" />
</li>
</ul>
</div>附上本篇文章开篇图的示例 ~
代码示例：
<div class="block">
<!-- 添加CSS样式 -->
<style>
/* 添加CSS样式 */
/* 隐藏标题栏中的前置元素 */
h2.widget-tabs.block-tabHeader.tabs.hScroller.block-minorHeader::before {
display: none;
}
/* 设置标题栏高度 */
h2.widget-tabs.block-tabHeader.tabs.hScroller.block-minorHeader {
height: 55px;
}
/* 当标签页为活动状态时，隐藏副标题 */
li.is-active > .block .block-minorHeader {
display: none !important;
}
/* 设置标签页的样式 */
.widget-tabs.block-tabHeader.tabs.hScroller.block-minorHeader {
display: flex;
justify-content: center; /* 将子元素水平居中 */
align-items: center; /* 将子元素垂直居中 */
}
/* 设置标题栏的定位 */
.block-tabHeader {
position: relative !important;
}
/* 设置标签的样式 */
.tabs-tab {
cursor: pointer;
display: inline-block;
padding: 10px 20px;
text-decoration: none;
color: black;
}
/* 设置鼠标悬停时标签的样式 */
.tabs-tab:hover {
background-color: #f0f0f0;
}
</style>
<!-- 标签页的标题栏 -->
<h2 class="widget-tabs block-tabHeader tabs hScroller block-minorHeader" data-xf-init="tabs h-scroller" data-state="replace" role="tablist" style="position: sticky; top: 0; z-index: 100;">
<span class="hScroller-scroll">
<!-- 链接到新主题 -->
<a href="javascript:void(0);" class="tabs-tab is-active" role="tab" data-target="new_topics">新主题</a>
<!-- 链接到新资源 -->
<a href="javascript:void(0);" class="tabs-tab" role="tab" data-target="new_resources">新资源</a>
<!-- 链接到新回复 -->
<a href="javascript:void(0);" class="tabs-tab" role="tab" data-target="new_posts">新回复</a>
</span>
</h2>
<!-- 标签页的内容面板 -->
<ul class="tabPanes widget--tab">
<!-- 新主题内容面板 -->
<li role="tabpanel" id="new_topics" class="tab-content is-active">
<xf:widget key="forum_overview_new_topics" />
</li>
<!-- 新资源内容面板 -->
<li role="tabpanel" id="new_resources" class="tab-content">
<xf:widget key="xfrm_forum_overview_new_resources" />
</li>
<!-- 新回复内容面板 -->
<li role="tabpanel" id="new_posts" class="tab-content">
<xf:widget key="forum_overview_new_posts" />
</li>
</ul>
</div>参考文献：
@死了算了 https://www.cnxfans.com/threads/292/
@小关 https://www.cnxfans.com/threads/818/
最后编辑：
打赏用户
