多功能英汉汉英词典用 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;
}