简单易用Javascript Hide and Show

lxchen2001 · 发表于 2016-9-17 19:57:21

Javascript 就这么几行：

function toggle() {
if (document.getElementById("showhide").className=="show"){
  document.getElementById("showhide").className="hide";
  }
else{
  document.getElementById("showhide").className="show";
}
}

css 里面加上hide 、 show，缺省定义是hide. （反过来也行，自己修改一下就好了）

HTML / MDX源文件中任何元素都能使用。

倒是有个问题也顺便请教一下：

我想显示隐藏中的前10个元素、20个、50个、100个或者全部（如附件中的<a>），这样的JS要怎么写？

dolanskurd · 发表于 2016-9-18 14:48:52

Great job!

jiangws · 发表于 2016-9-24 22:48:14

好办法，谢谢分享。

lxchen2001 · 发表于 2016-9-25 02:32:17

本帖最后由 lxchen2001 于 2016-9-25 02:36 编辑

jiangws 发表于 2016-9-24 22:48
6 [' G$ {3 F# {; c/ H1 T好办法，谢谢分享。

后来发现这段代码在MDICT中不能很好应用，在GD中是没问题。

也发现另外的问题，比如一个页面中有多个ID, 这个就不太适用。

在学习实践中，学到了新写法，这个可以在MDICT中正常运行，代码同样的简洁。

（点击Full Hyponyms测试）

idict · 发表于 2016-9-25 12:50:57

想显示隐藏中的前10个元素、20个、50个、100个或者全部

在下不会css/js和排版. 之前有参考阅读大神的帖子. 偶有心得, 不作参考.
都是大神们的大作, 抱歉忘记了名字了. 在下遵循不知道名字的开源协定, 上载测试文件.

如果使用previousSibling/nextSibling等, 可能会有大的机能开支吧. 如果i7应该是没有所谓...

如果css/js, 在文本中需要显示隐藏的内容加上标签, 应该是很快的. 不过会增加文本大小. 也只是愚见, 不作参考.

这个只适应用MDict_PC 1.3 RC4, 其他的就不知道了.

大致如下:
js

function transChs_test(ele) {
6 l' j- i _. D3 T
if (ele.className == 'js_active') {
" C" A+ w( m0 }! V. E6 R! A3 |
ele.className = '';
* l/ B* h+ _1 n9 }0 i) G
document.getElementById('test').className = '';
+ \% G4 U" q' v9 c+ h
} else {+ k0 ^4 x' }' d8 U$ |
document.getElementById('test').className = 'js_chs';; f1 Q' K: v% o5 A
ele.className = 'js_active'
( q) P" Z/ g# s* n- L5 v
}1 J* `9 k6 ?. ~
}

复制代码

css部分

/* default: chinese */
% ^* {. S$ k- U3 B/ V3 m$ `
0 v0 T" c; `5 L2 }, I' L+ }" a+ W
.cn_btn{font-weight:bold;color:White;background-color:DarkSlateBlue;padding-left:5px;margin-right:10px;cursor:pointer;}- q0 O3 ^7 {7 p5 B# ]4 N
.cn_btn:hover{color:MidnightBlue;background-color:Pink;}% m6 f$ }- W+ u* O
.js_active .cn_btn{font-weight:bold;color:Gray;background:Gainsboro;}% ]' E) h2 D8 ^0 s m
.js_active .cn_btn:hover{color:MidnightBlue;background:Pink;}" Z$ f+ o* W" j
' F( F" n' z5 `$ k
.js_chs .L_CEX,.js_chs .L_DEC,.js_chs .L_EXC,.js_chs .L_DCH,.js_chs .L_ITC{display:none;}
. b0 |1 C0 E( h. X, C* s8 L! u% \
. P+ o) {: M3 S0 ]
2 {$ i$ T4 O0 Y$ W& r
/* default: no chinese */
$ u$ f# o) E0 e& [
/*
j6 ?$ O5 X" e- N3 w
.cn_btn{font-weight:bold;color:Gray;background-color:Gainsboro;padding-left:5px;margin-right:10px;cursor:pointer;}0 E2 z3 c. U% Y) e7 P
.cn_btn:hover{color:MidnightBlue;background-color:Pink;}$ s" \8 t. P. n. S2 k$ w
.js_active .cn_btn{font-weight:bold;color:White;background:DarkSlateBlue;}
/ N e9 {* o$ m+ O8 ~% O9 ]' O
.js_active .cn_btn:hover{color:MidnightBlue;background:Pink;}- T6 i# W+ o& u1 I4 L
+ j+ o" e; t) Y1 ]0 {- `1 @0 ?
.js_chs .L_CEX,.js_chs .L_DEC,.js_chs .L_EXC,.js_chs .L_DCH,.js_chs .L_ITC{display:inline;}
: b3 K, _3 k7 Z9 p
.L_CEX,.L_DEC,.L_EXC,.L_DCH,.L_ITC{display:none;}* e# b+ f4 e0 y/ h" j
*/

复制代码

文本词条头部加个总ID: test, 其余需要显示或隐藏的, 加对应标签, 如上述的中文标签. 加个按键标签, 就可以显示隐藏中文了. 不知道是否理解了楼主的所说的.

<link href="test.css" rel="stylesheet" type="text/css"/><script src="test.js"></script>5 E4 T7 h6 N7 e3 M
<div class="test" id="test">
0 ^! y3 A: G$ \ v% s2 p
<span class="L_ENT">
0 J& r" X# b0 n# o; ]! Q0 j: F
test8 U. F: l* ^* G, T
</span>
: s: Q8 N- }* ?# V6 S
<a name="L_topv">4 K( l# m W ~; U/ ?
</a>
: r, _; T q/ |' J8 P/ h
<div class="L_MRK">7 p: C% M+ I- F. ?7 ?5 {! c
<span class="cn_js" onclick="transChs_test(this)"># U3 w" P" X# X6 {9 H% v8 m6 b
<span class="cn_btn" title="Chinese on/off">$ R( {$ G" E2 q. n
Chs0 y6 e% o% W/ ]- p$ f
</span>
" e! [$ i: B$ G; f
</span>% R& U P6 L) Y
...5 t9 D" [% ? l
...% t3 x3 I' c4 O7 R' Y4 r% r$ W
...

复制代码

lxchen2001 · 发表于 2016-9-25 16:47:44

idict 发表于 2016-9-25 12:50, K: h0 F0 G7 I! X1 r' D
在下不会css/js和排版. 之前有参考阅读大神的帖子. 偶有心得, 不作参考.
G$ S0 B5 h8 Y都是大神们的大作, 抱歉忘记 ...

谢谢分享心得。

点击本元素来调整css的配置, 挺好的想法。虽然和我的用法不一样，但明白思路了。

（复制代码部分复制出来并入了很多乱码，不知能否单独提供一下？）

谢谢

idict · 发表于 2016-9-26 13:56:55

lxchen2001 发表于 2016-9-25 16:47
) k% F* e6 J7 Q- f5 y谢谢分享心得。 : o, _3 u6 |8 T0 y
; \* @" @1 O0 A0 ^) i4 u
点击本元素来调整css的配置, 挺好的想法。虽然和我的用法不一样，但明白思路了。

居然忘记上载文件了, 怪不得积分没有上涨啦, 才半分啊...

只得重做, 之前的删除了.

见附件如下, 不作参考.

eeshu · 发表于 2016-9-26 15:02:44

idict 发表于 2016-9-25 12:50( z4 a( R3 s- H; k+ t
在下不会css/js和排版. 之前有参考阅读大神的帖子. 偶有心得, 不作参考. d4 N1 |. s9 F. y+ f9 H# D5 r. ~
都是大神们的大作, 抱歉忘记 ...

颜值很高

fnaviwwo1 · 发表于 2016-9-29 20:23:26

我记得LZ一开始是用.style.display ='none '？现在的写法有什么优点么？

lxchen2001 · 发表于 2016-9-29 21:14:41

fnaviwwo1 发表于 2016-9-29 20:235 K2 F6 P7 X/ F, r7 { f
我记得LZ一开始是用.style.display ='none '？现在的写法有什么优点么？

都可行

用class的话可以用css来控制，而且不光是隐藏显示，包括其他的css设定

jiangws · 发表于 2016-10-1 23:00:00

idict 发表于 2016-9-26 13:56' f: J+ f F4 j3 r
居然忘记上载文件了, 怪不得积分没有上涨啦, 才半分啊...& w8 f0 ^: p5 c0 K6 U0 H1 p
4 E3 u$ @/ r" l$ v; q" L0 M
只得重做, 之前的删除了.

很好的想法，谢谢！

jiangws · 发表于 2016-10-1 23:06:49

lxchen2001 发表于 2016-9-25 02:32
! D0 [. Z, r9 O( c6 r& k5 ]2 d后来发现这段代码在MDICT中不能很好应用，在GD中是没问题。
4 \% L" t1 s3 ~/ v9 g: D0 _
6 w& K0 R* `+ ^- j) h1 X, b; C' Y: B也发现另外的问题，比如一个页面中有多 ...

使用this.nextElementSibling，对词典的排版要求很高，要作全面的检查，但效果很好的。

lxchen2001 · 发表于 2016-12-2 02:59:45

jiangws 发表于 2016-10-1 23:06
/ H+ H4 ]7 ]3 W. A使用this.nextElementSibling，对词典的排版要求很高，要作全面的检查，但效果很好的。

嗯是的

看别人的标签有时觉得比较累所以倾向按照自己的想法去完成

		自动登录	找回密码
密码			免费注册

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

本帖子中包含更多资源

本帖子中包含更多资源

本帖子中包含更多资源

本帖子中包含更多资源