第一步,先上原链接: Andy Matuschak,有兴趣的小伙伴可以去看看长啥样
第二步,上片段:
css 片段:
.layout__center div.layout-tab-container.fn__flex-1 > div.fn__flex-1.fn__none {
display: flex !important;
min-width: 600px;
border-radius: 0.75em;
border: 2px solid var(--b3-border-color);
margin: 10px;
}
.layout__center div.layout-tab-container.fn__flex-1 > div.fn__flex-1 {
display: flex !important;
min-width: 600px;
border-radius: 0.75em;
border: 2px solid var(--b3-border-color);
margin: 10px;
}
js 片段:
document.querySelectorAll('li[data-type="tab-header"]').forEach(tab => {
if (tab && tab.getAttribute('data-type') === 'tab-header') {
console.log('Clicking tab with data-id:', tab.getAttribute('data-id'));
tab.click();
}
});
第三步,简单解释一下
css片段
的大致思路就是把未激活标签页的 display
改回 flex
,用 js片段
的原因在于每次打开思源后,非活动标签页是不加载的,js片段
把每个标签页点一次,对就是这么简单粗暴。
更新
document.querySelectorAll('li[data-type="tab-header"]').forEach(tab => {
// 用户点击标签页时平滑滚动到对应的内容区域,不支持右边的标签页菜单
tab.addEventListener('click', () => {
const tabId = tab.getAttribute('data-id');
const content = document.querySelector(`.layout__center .fn__flex-1.protyle[data-id="${tabId}"], .layout__center .fn__flex-1.protyle.fn__none[data-id="${tabId}"]`);
if (content) {
content.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center' });
}
});
});
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于