掌上百科 - PDAWIKI

 找回密码
 免费注册

QQ登录

只需一步,快速开始

查看: 1933|回复: 12

[教程] 简单易用Javascript Hide and Show

[复制链接]

该用户从未签到

发表于 2016-9-17 19:57:21 | 显示全部楼层 |阅读模式
Javascript 就这么几行:* c0 X5 |* H! A- V
* t+ }! Y2 Y2 ]/ h4 I  K
function toggle() {( o. E4 s" k5 j8 P
if (document.getElementById("showhide").className=="show"){
' R* c4 x% a+ w) M) T2 D. k4 A  document.getElementById("showhide").className="hide";
- n+ a4 U- O( F% Z7 A) g# m  }
' \, v* n% f- x& z( Z% R+ [ else{7 y" F/ B! O* g* U3 \9 D0 q/ D& s
  document.getElementById("showhide").className="show";
- y* i0 k; \$ \2 l. k+ X5 k& c }! I$ {+ o& Z3 r
}
8 a: Z$ W9 D" M
$ k" [# X4 _4 \2 W" |css 里面加上hide 、 show,缺省定义是hide. (反过来也行,自己修改一下就好了)/ h0 }5 V) }4 j3 Z6 m" d1 |

% Z  g0 g% F' C9 X0 X' P0 t) wHTML / MDX源文件中 任何元素都能使用。
/ j3 t1 k  p' z& g5 w5 }; _6 g6 ~$ [7 i4 u; C

; L$ b2 Z, t# N# w倒是有个问题也顺便请教一下:8 \$ Y; V' L& F' e
( f2 o  [% \9 R9 e1 I& @& I
我想显示隐藏中的前10个元素、20个、50个、100个或者全部(如附件中的<a>),这样的JS要怎么写?

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?免费注册

x
  • TA的每日心情
    开心
    2019-5-18 14:33
  • 签到天数: 12 天

    [LV.3]偶尔看看II

    发表于 2016-9-24 22:48:14 | 显示全部楼层
    好办法,谢谢分享。

    该用户从未签到

     楼主| 发表于 2016-9-25 02:32:17 | 显示全部楼层
    本帖最后由 lxchen2001 于 2016-9-25 02:36 编辑 & y, u* `  x2 q* e) H# c
    jiangws 发表于 2016-9-24 22:48! D" t- t! M7 ?% E1 e
    好办法,谢谢分享。
    ) i- _: S7 r4 f8 o+ ?* v5 ?- N

    / d& M, C2 {4 x# i后来发现这段代码在MDICT中不能很好应用,在GD中是没问题。* Y) }) m* A$ ~3 {" {9 u: d
    & T8 M  b% P% P- L# @" E
    也发现另外的问题,比如一个页面中有多个ID, 这个就不太适用。! ]# Q5 z  i* a' n  v

    2 P% N- t$ r9 V6 b在学习实践中,学到了新写法,这个可以在MDICT中正常运行,代码同样的简洁。# b! x; X9 i% Z* o. x; G; K+ j: Y
    * b# H9 l0 S, Y+ Q4 c
    (点击Full Hyponyms测试)

    本帖子中包含更多资源

    您需要 登录 才可以下载或查看,没有账号?免费注册

    x

    该用户从未签到

    发表于 2016-9-25 12:50:57 | 显示全部楼层
    想显示隐藏中的前10个元素、20个、50个、100个或者全部

    ; C& N% g2 K6 n+ e  q4 G4 F. N  X" |  I/ t
    在下不会css/js和排版. 之前有参考阅读大神的帖子. 偶有心得, 不作参考.
    6 s& N4 [: w2 J1 p0 d都是大神们的大作, 抱歉忘记了名字了. 在下遵循不知道名字的开源协定, 上载测试文件.% t3 }' r" z) r2 `& ^1 q! l
    * V$ I$ x3 J; j# F: ^
    如果使用previousSibling/nextSibling等, 可能会有大的机能开支吧. 如果i7应该是没有所谓...7 X: k, @; l& G/ l

    * b* X5 `' X6 h1 U( P如果css/js, 在文本中需要显示隐藏的内容加上标签, 应该是很快的. 不过会增加文本大小. 也只是愚见, 不作参考.
    0 t5 B; O( Y2 h' `! f
    1 ]' L' ]3 P- W0 E2 z/ n这个只适应用MDict_PC 1.3 RC4, 其他的就不知道了.
    % u! d; V  B- ^4 B' v1 z8 R$ g5 [6 i" G
    大致如下:
      b! p' e! h! G" Q/ Z6 @, w; p- _* @' Bjs8 y5 d: \5 m; ~  ?: K
    1. function transChs_test(ele) {8 [' @: g  w9 w6 S
    2.         if (ele.className == 'js_active') {" H" l8 f. f" k! f; [, c
    3.                 ele.className = '';: L  @, H! X9 ^( }+ w8 @9 k* h7 c
    4.                 document.getElementById('test').className = '';
      9 H" @: M  s8 X# ?, b  S' p
    5.         } else {
      1 r" }$ w9 |5 ^
    6.                 document.getElementById('test').className = 'js_chs';; l2 E7 }3 K5 M1 v/ {0 ?% D
    7.                 ele.className = 'js_active'% Z" Z) e' K- X# B
    8.         }4 m- H( x5 c  a8 j% F2 g: N
    9. }
    复制代码

    6 i0 n) c7 ~5 U
    , i( ]3 Y* K( fcss部分( x& ~5 Z5 h. ?$ a2 t/ y! h4 ]+ B
    1. /* default: chinese */
      . s& I0 }2 g- [& {  M
    2. % N. n/ s3 y3 L5 W
    3. .cn_btn{font-weight:bold;color:White;background-color:DarkSlateBlue;padding-left:5px;margin-right:10px;cursor:pointer;}
      1 v5 C8 g; b/ [# [& }
    4. .cn_btn:hover{color:MidnightBlue;background-color:Pink;}
      ' ?5 f$ g# L% x. b/ A1 _
    5. .js_active .cn_btn{font-weight:bold;color:Gray;background:Gainsboro;}& H9 {+ w9 t( B( a" P/ n
    6. .js_active .cn_btn:hover{color:MidnightBlue;background:Pink;}3 r; \, {3 z4 L: k

    7. , V! m$ i* {- U
    8. .js_chs .L_CEX,.js_chs .L_DEC,.js_chs .L_EXC,.js_chs .L_DCH,.js_chs .L_ITC{display:none;}
      & k: d  C! j2 x- D$ E
    9. . }& g. f' c0 ?2 M+ y! ~
    10. - K; f1 i+ }+ A
    11. /* default: no chinese */
      ( P/ }% e4 \0 L( ]" p4 O  }
    12. /*5 q0 E& c; r9 w8 u0 W& C6 ]# ?
    13. .cn_btn{font-weight:bold;color:Gray;background-color:Gainsboro;padding-left:5px;margin-right:10px;cursor:pointer;}; d4 @) d' h) G5 M
    14. .cn_btn:hover{color:MidnightBlue;background-color:Pink;}2 [) A# P' v- B( W2 j. [* P# Q
    15. .js_active .cn_btn{font-weight:bold;color:White;background:DarkSlateBlue;}
      ' f0 x; N/ [( ^. y, H
    16. .js_active .cn_btn:hover{color:MidnightBlue;background:Pink;}
      3 m' |. N5 F! y/ E

    17. $ G9 R5 P0 g" [
    18. .js_chs .L_CEX,.js_chs .L_DEC,.js_chs .L_EXC,.js_chs .L_DCH,.js_chs .L_ITC{display:inline;}
      9 X0 c+ e8 g1 C' Z
    19. .L_CEX,.L_DEC,.L_EXC,.L_DCH,.L_ITC{display:none;}, J2 m4 c8 i$ l8 Z* [  A
    20. */
    复制代码

    ) t( S9 h* i1 Z8 b8 h$ p: o! d5 |$ j8 }5 j- d  V* L
    5 b- U3 R2 Q3 V
    文本词条头部加个总ID: test, 其余需要显示或隐藏的, 加对应标签, 如上述的中文标签. 加个按键标签, 就可以显示隐藏中文了. 不知道是否理解了楼主的所说的.
    ' C( ]+ }" [. A$ l1 U
    1. <link href="test.css" rel="stylesheet" type="text/css"/><script src="test.js"></script>
      ! B2 h# U7 h( U) x1 B; c6 c
    2. <div class="test" id="test">% B/ X  [  B. z/ e( V7 T) ?
    3.    <span class="L_ENT">
      : j1 K/ J# N% k1 C6 Q4 ]
    4.     test
        l; l6 G$ b3 A8 X, n, U) [. o
    5.    </span>
      1 W% W; Y8 x! I1 D
    6.    <a name="L_topv">
      0 @. A5 \% f# @/ z; ~( ^' A6 y+ q
    7.    </a>, L0 |, V3 M/ F8 Z) y
    8.    <div class="L_MRK">+ z+ K- Z9 r6 Q9 z  Y
    9.     <span class="cn_js" onclick="transChs_test(this)">
      # v- |% p) B; C3 U$ z) q
    10.      <span class="cn_btn" title="Chinese on/off">, Z- u3 r0 S7 M
    11.       Chs
      / Y( P& d1 H* x8 x9 l/ e* U
    12.      </span>
      # s0 B+ \$ v6 K' U6 g
    13.     </span>
      % f8 a- `; D' B0 H: _
    14. ...
      0 W, E0 ]4 |( ?, Y$ k
    15. ...
      4 x4 q2 c3 T; B' K2 \
    16. ...
    复制代码

    / k  P6 p! t) ~( o6 E  T: ^) `' N; h/ }7 n' u8 [3 M5 Q

    本帖子中包含更多资源

    您需要 登录 才可以下载或查看,没有账号?免费注册

    x

    该用户从未签到

     楼主| 发表于 2016-9-25 16:47:44 | 显示全部楼层
    idict 发表于 2016-9-25 12:50& l8 C/ T; C0 i8 A: j( V
    在下不会css/js和排版. 之前有参考阅读大神的帖子. 偶有心得, 不作参考.
    * u7 p6 _5 J: j% @% R  N) o都是大神们的大作, 抱歉忘记 ...
    / y. v% `/ w8 |, O4 d
    谢谢分享心得。
      Y' B; C3 E+ d
    : v, \) _* R, n点击本元素来调整css的配置, 挺好的想法。虽然和我的用法不一样,但明白思路了。: Y6 Z& X  J0 L8 Z
    " N& o3 n6 J1 q: T. M6 _
    (复制代码部分复制出来并入了很多乱码,不知能否单独提供一下?)
    - O, |) ^; t% C$ X- q; S9 t$ s; W' c4 L3 ^8 E( g& Q
    谢谢

    该用户从未签到

    发表于 2016-9-26 13:56:55 | 显示全部楼层
    lxchen2001 发表于 2016-9-25 16:47
    % o* f' j2 C' \0 t7 Y" u4 r6 ^谢谢分享心得。
    . N0 d  N5 B, G- X7 ^  s. H6 Z& R: d- J) T8 f  P
    点击本元素来调整css的配置, 挺好的想法。虽然和我的用法不一样,但明白思路了。
    - X& _; p9 d. E/ K9 b: w
    居然忘记上载文件了, 怪不得积分没有上涨啦, 才半分啊...$ v: l9 s9 x5 u) R% ]+ ^: U
    / d5 j$ l, y3 o  o
    只得重做, 之前的删除了.2 l' `* N/ c- K- i" K$ \/ R

    $ S8 ~+ U6 `7 D见附件如下, 不作参考.& K& F3 x( K  p. M! i6 x

    本帖子中包含更多资源

    您需要 登录 才可以下载或查看,没有账号?免费注册

    x

    该用户从未签到

    发表于 2016-9-26 15:02:44 | 显示全部楼层
    idict 发表于 2016-9-25 12:501 R* m: T( P9 r$ }1 t2 a% e* a
    在下不会css/js和排版. 之前有参考阅读大神的帖子. 偶有心得, 不作参考.
    , U* _: p- Z. Z1 [( N4 a都是大神们的大作, 抱歉忘记 ...
    6 V7 i2 e, v& x  C3 t# L* _
    颜值很高

    该用户从未签到

    发表于 2016-9-29 20:23:26 | 显示全部楼层
    我记得LZ一开始是用.style.display ='none '?现在的写法有什么优点么?

    该用户从未签到

     楼主| 发表于 2016-9-29 21:14:41 | 显示全部楼层
    fnaviwwo1 发表于 2016-9-29 20:23
    ( A! l. o' `$ ~" K我记得LZ一开始是用.style.display ='none '?现在的写法有什么优点么?

    7 s$ j" `" o; I' z8 n7 ^  P都可行0 m9 i* z1 |! t
    6 G1 s, {9 O- ?& l$ C
    用class的话 可以用css来控制,而且不光是隐藏显示,包括其他的css设定
  • TA的每日心情
    开心
    2019-5-18 14:33
  • 签到天数: 12 天

    [LV.3]偶尔看看II

    发表于 2016-10-1 23:00:00 | 显示全部楼层
    idict 发表于 2016-9-26 13:56
    5 V  }* D/ u; e' v% @" X! z居然忘记上载文件了, 怪不得积分没有上涨啦, 才半分啊...1 [1 Y: [, r6 z3 V. M) ~

    , ^6 E4 U7 u" x1 m0 ~7 {只得重做, 之前的删除了.
    1 q8 L9 i( K$ @9 |/ d' }8 X
    很好的想法,谢谢!
  • TA的每日心情
    开心
    2019-5-18 14:33
  • 签到天数: 12 天

    [LV.3]偶尔看看II

    发表于 2016-10-1 23:06:49 | 显示全部楼层
    lxchen2001 发表于 2016-9-25 02:32: B% W6 o- i, Q+ i+ A' [  G% Y
    后来发现这段代码在MDICT中不能很好应用,在GD中是没问题。
    % X% E$ h8 X. ], _* P) k8 G1 b
    ; r9 m: S/ W; ]- m! b; ^- ~+ X, |也发现另外的问题,比如一个页面中有多 ...

    " N3 t3 c! V$ R! R: T5 I7 g% y使用this.nextElementSibling,对词典的排版要求很高,要作全面的检查,但效果很好的。

    该用户从未签到

     楼主| 发表于 2016-12-2 02:59:45 | 显示全部楼层
    jiangws 发表于 2016-10-1 23:06
    # `" f9 ?  j* X/ p& P: U使用this.nextElementSibling,对词典的排版要求很高,要作全面的检查,但效果很好的。

    / X6 G+ t1 f! R嗯 是的
    9 W, h& g* U8 g' B) N1 [
    : p8 z8 Y- o* o4 M看别人的标签 有时觉得比较累 所以倾向按照自己的想法去完成
    您需要登录后才可以回帖 登录 | 免费注册

    本版积分规则

    小黑屋|手机版|Archiver|PDAWIKI |网站地图

    GMT+8, 2024-3-29 09:48 , Processed in 0.036000 second(s), 9 queries , MemCache On.

    Powered by Discuz! X3.4

    Copyright © 2001-2023, Tencent Cloud.

    快速回复 返回顶部 返回列表