纯 CSS 切换词典栏目

@guojijun

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

dict.txt

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

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;
}
5 个赞

感谢,学习。

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

1 个赞

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

1 个赞

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