TA的每日心情 | 衰 2019-9-23 23:38 |
---|
签到天数: 8 天 [LV.3]偶尔看看II
|
本帖最后由 lbhl 于 2020-2-12 21:10 编辑
0 I# k$ \4 n9 K: O- u7 a2 f
# w7 Z$ N0 J( _6 R( M/ x<span class="word">
0 {. K+ s: r* i3 X very <span class="red"> neat </span> and clean
1 K" V0 k6 E0 r& y% S. L1 l <span class="chn">整洁的, <span class="bold" 干净</span>的</span>
" n2 |8 R& U2 ?* g( l$ M f</span>
2 V; g) m: w. g f- @! j& W V! A, m7 W
4 D# i" z, q+ |: u2 U$ \每个词头中英释义在一个span.word标签中。
- A- F+ p$ L) P2 I2 z) \* r0 U/ X里面的全部中文释义用仅一个span.chn标签围绕,span.chn标签中可以有子标签如例中span.bold。其余部分是英文释义。英文释义的文本也可以有各种样式修饰如例中red样式,但英文释义绝对不会出现在span.chn中。
3 h4 ^% c. ?8 N. g! \: Z C
y/ }1 B1 p! H* j" {9 b; C) @如何用css,javascript,jquery等方法,将英文部分隐藏,仅显示中文部分?即,最后转换完的效果:$ O/ f* G0 U+ T, T l* ?; G, Z
Z3 d) w2 V1 W! k" D2 m$ j o<span class="word">
8 ~" H8 g; C) K8 e/ H6 z4 @ E <span class="chn">整洁的, <span class="bold" 干净</span> 的</span>
9 T$ T9 y: Q* f! ]9 W/ g! y</span> 5 W5 U% P8 W, ]6 m* ~5 g4 E7 \
+ e: y3 }" y+ Z6 A$ s' \' {因为英文释义部分没有标签围绕,貌似不大好处理。我用jquery的 addclass方法在最外层span动态加一个事先定义的样式 .hide {display: none;},再在中文释义标签上动态加一个内联样式 display:inline。这样中文释义样式的两个设置是冲突的,一个是inline即显示,一个是从外层span.hide继承的none不显示,此时根据CSS冲突解决机制应该是内联样式设置优先,中文释义最终将不会被隐藏,被隐藏的只有英文部分,效果就达到了。9 n2 m& s5 t: \8 `) h
6 e+ g, C: i1 u0 a9 K4 e c哪知,上词典软件一试根本不是这么回事,中文和英文全部都被隐藏了。
* p: P3 E, G E: y, e' C- f3 S8 i0 O2 g
$("span.word").addClass("hide");
! l; \4 _* M4 [$("span.chn").css("display","inline");9 q/ x% o; q$ s6 B
7 L& i% l& V4 {哪位前辈指点一下,谢谢!" b( ]; I; _% l: Y" r# ~
' X5 K/ i% M6 ]1 h+ |7 u |
|