TA的每日心情 | 衰 2019-9-23 23:38 |
---|
签到天数: 8 天 [LV.3]偶尔看看II
|
本帖最后由 lbhl 于 2020-2-12 21:10 编辑
& E3 Q! A1 \, b1 _% Q; r9 Z. @
3 E7 p0 R. d4 x/ z t% ]<span class="word">
4 U3 k6 ~7 k( D9 n! ~( ]' S1 X9 ? very <span class="red"> neat </span> and clean7 s: M2 P( U' H/ A
<span class="chn">整洁的, <span class="bold" 干净</span>的</span>
9 b+ w5 V# A* {; W% _( B: l9 o+ s</span>
7 R+ ~8 W4 y5 x% w" x( D
+ z% A+ O4 |/ T& a; t6 G) z( G每个词头中英释义在一个span.word标签中。. _$ W) B3 Q. b, A: A7 ^
里面的全部中文释义用仅一个span.chn标签围绕,span.chn标签中可以有子标签如例中span.bold。其余部分是英文释义。英文释义的文本也可以有各种样式修饰如例中red样式,但英文释义绝对不会出现在span.chn中。
, c( E* v8 k) w' J: O7 c
) ]+ O& y* L" W( ?) v! b9 u5 h! v如何用css,javascript,jquery等方法,将英文部分隐藏,仅显示中文部分?即,最后转换完的效果:
' k/ c. } f( p1 H- W% L3 G8 @3 P; |
% j/ B; |4 d! A k<span class="word">! Q- a. t, d6 H2 k( L
<span class="chn">整洁的, <span class="bold" 干净</span> 的</span>' @! @% }; h% ]( M* `
</span>
( s3 n( s( e+ X" [2 F
6 q( ^3 I4 Q0 C' ?因为英文释义部分没有标签围绕,貌似不大好处理。我用jquery的 addclass方法在最外层span动态加一个事先定义的样式 .hide {display: none;},再在中文释义标签上动态加一个内联样式 display:inline。这样中文释义样式的两个设置是冲突的,一个是inline即显示,一个是从外层span.hide继承的none不显示,此时根据CSS冲突解决机制应该是内联样式设置优先,中文释义最终将不会被隐藏,被隐藏的只有英文部分,效果就达到了。
" {# w5 C! L# P* @- j
. m; E$ H7 Q1 G: l. ]哪知,上词典软件一试根本不是这么回事,中文和英文全部都被隐藏了。
- I( c# }* g4 ~: j" H4 N# p5 u, ?- Z$ u, z+ [
$("span.word").addClass("hide");: g5 d; A! [8 J" Y# p- k0 i
$("span.chn").css("display","inline");
' `' |3 a. `1 f9 {4 _7 B' S9 c* ?3 v' G" M) o% y% G. H
哪位前辈指点一下,谢谢!# ?3 C# ? @8 e4 p ?" K7 Y
9 K1 N# q7 X! a, }0 }1 X. K |
|