# 纯 CSS 切换词典栏目

**URL:** <https://forum.freemdict.com/t/topic/20341>\
**Category:** 技术交流与词典编修\
**Created:** [2023 年4 月 7 日 04:07 UTC](https://forum.freemdict.com/t/topic/20341 "2023-04-07T04:07:04Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

作者： ![匿名1445](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/%E5%8C%BF/5f8ce5/32.png) [@匿名1445](https://forum.freemdict.com/u/%E5%8C%BF%E5%90%8D1445)\
发布日期： [2023 年4 月 7 日 04:07 UTC](https://forum.freemdict.com/t/topic/20341/1 "2023-04-07T04:07:04Z")

</div>

> [@heart多功能英汉汉英词典，千万词头，4月3日版](https://forum.freemdict.com/t/topic/20270):
>
> 修改已知错误，新增记忆方法、新增网易双语例句（鼠标指向部分单词可高显相关释义）

@guojijun

多功能英汉汉英词典用 js 切换栏目，这里我用 css 实现类似功能，即初始状态高亮 d1，显示 y1，点击 d，显示对应的 y，并高亮 d。

dict.txt

```auto
aaa bbb
<link href="test.css" rel="stylesheet">
<H>
<input type="radio" name="gjj_aaa_bbb" id="gjj_aaa_bbb_y1" checked>
<label for="gjj_aaa_bbb_y1">d1</label>
<Y>Y111</Y>
<input type="radio" name="gjj_aaa_bbb" id="gjj_aaa_bbb_y2">
<label for="gjj_aaa_bbb_y2">d2</label>
<Y>Y222</Y>
</H>
</>

```

其中 gjj\_aaa\_bbb 可换成与词条绑定的其它字符串。

css

```auto
H {
    display: block;
    position: relative;
}

H > input {
    display: none;
}

H > label {
    display: inline-block;
    margin-right: 6px;
    user-select: none;
}

H > Y {
    display: none;
    position: absolute;
    margin-top: 6px;
} 

H > :checked + label + Y {
    display: block;
}

H > :checked + label {
    color: pink;
}

```

---

<div class="post-metadata">

作者： ![zhongx](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/z/ba9def/32.png) [@zhongx](https://forum.freemdict.com/u/zhongx)\
发布日期： [2023 年4 月 7 日 07:34 UTC](https://forum.freemdict.com/t/topic/20341/2 "2023-04-07T07:34:24Z")

</div>

感谢，学习。

---

<div class="post-metadata">

作者： ![匿名1445](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/%E5%8C%BF/5f8ce5/32.png) [@匿名1445](https://forum.freemdict.com/u/%E5%8C%BF%E5%90%8D1445)\
发布日期： [2023 年4 月 7 日 12:59 UTC](https://forum.freemdict.com/t/topic/20341/3 "2023-04-07T12:59:11Z")

</div>

这个方法可以用来做多合一 Tab 词典。只是多合一难点在解决内部 css/js 冲突。

---

<div class="post-metadata">

作者： ![匿名1445](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/%E5%8C%BF/5f8ce5/32.png) [@匿名1445](https://forum.freemdict.com/u/%E5%8C%BF%E5%90%8D1445)\
发布日期： [2023 年4 月 7 日 13:03 UTC](https://forum.freemdict.com/t/topic/20341/4 "2023-04-07T13:03:05Z")

</div>

要给每本词典的 css 选择器加前缀。

---

<div class="post-metadata">

作者： ![匿名1453](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/%E5%8C%BF/c89c15/32.png) [@匿名1453](https://forum.freemdict.com/u/%E5%8C%BF%E5%90%8D1453)\
发布日期： [2023 年4 月 15 日 00:36 UTC](https://forum.freemdict.com/t/topic/20341/5 "2023-04-15T00:36:45Z")

</div>

多合一词典，部分内容默认折叠，带锚点的词条间跳转基本废了。