TA的每日心情 | 衰 2019-9-23 23:38 |
---|
签到天数: 8 天 [LV.3]偶尔看看II
|
本帖最后由 lbhl 于 2020-2-12 21:10 编辑
- j1 M6 J6 t" W* \7 |6 l
7 e: Y9 \" P' _+ M<span class="word">/ K4 ]1 [* u4 M
very <span class="red"> neat </span> and clean
) F, k% `2 Y1 v6 D2 ?: v <span class="chn">整洁的, <span class="bold" 干净</span>的</span>
& u3 k5 }* r5 r" H</span> # m* O( r/ `4 a$ o% t K$ x6 F
- u7 ]" j8 u- o每个词头中英释义在一个span.word标签中。1 G* t3 m7 D/ F
里面的全部中文释义用仅一个span.chn标签围绕,span.chn标签中可以有子标签如例中span.bold。其余部分是英文释义。英文释义的文本也可以有各种样式修饰如例中red样式,但英文释义绝对不会出现在span.chn中。
* g6 u2 y1 O: ?1 T o8 w
- x5 u% V4 Q) [" D5 m+ J4 n4 c如何用css,javascript,jquery等方法,将英文部分隐藏,仅显示中文部分?即,最后转换完的效果:( i$ Q/ j% \: l) ?3 d8 q* ^/ D
0 h% b- e# }0 n4 b6 A! `
<span class="word">
0 i; C% o+ J, U: X0 ~/ P7 X <span class="chn">整洁的, <span class="bold" 干净</span> 的</span># g- B& B! g( i+ f* l# K
</span> 2 u- p! X; U% E; S8 s
. a" M, _$ N/ Y7 b因为英文释义部分没有标签围绕,貌似不大好处理。我用jquery的 addclass方法在最外层span动态加一个事先定义的样式 .hide {display: none;},再在中文释义标签上动态加一个内联样式 display:inline。这样中文释义样式的两个设置是冲突的,一个是inline即显示,一个是从外层span.hide继承的none不显示,此时根据CSS冲突解决机制应该是内联样式设置优先,中文释义最终将不会被隐藏,被隐藏的只有英文部分,效果就达到了。4 `: y- ~% O& U S& R
: Y4 h+ w# O8 ` k* v1 r
哪知,上词典软件一试根本不是这么回事,中文和英文全部都被隐藏了。7 x4 ?7 _& A3 c1 }
/ s! J. J" y6 f' d7 T! S% c+ c" q
$("span.word").addClass("hide");
$ B' e2 N3 R: S6 S; t7 d$("span.chn").css("display","inline");' p9 d' m4 N3 L. T0 X
9 T! }1 m8 q" C: G) y2 M; u哪位前辈指点一下,谢谢!
$ C; N) {. b% e. u, {8 T, g8 ^% e0 ?! {( _
|
|