简单易用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
3 R9 j7 Z5 W% x0 r. a好办法，谢谢分享。

后来发现这段代码在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) {4 Q6 W* h0 L( j7 C4 d5 ]
if (ele.className == 'js_active') {: j0 q: [% n4 s4 ~2 G, N3 k
ele.className = '';2 Q9 L, Z% t9 g1 Q+ r, C3 t: N
document.getElementById('test').className = '';
4 j) U( K" I: q6 C, S
} else { W0 d# `: b+ U$ F9 f5 K
document.getElementById('test').className = 'js_chs';5 _1 ?! |4 t2 z3 ~ V L7 E8 F
ele.className = 'js_active') N" I- q0 }9 s C9 F0 E5 F- f& Z$ ^
}
X7 |9 L4 \5 \+ V3 O
}

复制代码

css部分

/* default: chinese */
/ P; V# D5 F7 U6 ?% ^! s4 }
7 S) O% w- K- N. {6 ~ E
.cn_btn{font-weight:bold;color:White;background-color:DarkSlateBlue;padding-left:5px;margin-right:10px;cursor:pointer;}2 Y2 O& ~& D Z/ E! h
.cn_btn:hover{color:MidnightBlue;background-color:Pink;}
+ ?6 S) s4 ?# m5 G
.js_active .cn_btn{font-weight:bold;color:Gray;background:Gainsboro;}
3 H" d$ x# g$ v2 B5 }! H3 m7 _6 Z# q
.js_active .cn_btn:hover{color:MidnightBlue;background:Pink;}
5 G! P/ f$ [" I" K* g
; |& w1 _# L7 }: S; F1 `0 U
.js_chs .L_CEX,.js_chs .L_DEC,.js_chs .L_EXC,.js_chs .L_DCH,.js_chs .L_ITC{display:none;}
6 [' |% d( R) X, L$ d1 f3 D$ m
! `6 v/ y/ B5 i2 _9 L0 r0 f- V
! [$ F4 f$ A5 h$ T' b1 b, S
/* default: no chinese */9 j% T2 A3 ]) u9 y; |$ Y5 M
/*; o$ w: v" h: [) c% r
.cn_btn{font-weight:bold;color:Gray;background-color:Gainsboro;padding-left:5px;margin-right:10px;cursor:pointer;}
9 ^( r5 Z8 @' y b* c5 ^ I
.cn_btn:hover{color:MidnightBlue;background-color:Pink;}- t# f. k% ^2 x% {8 |9 s2 C- g
.js_active .cn_btn{font-weight:bold;color:White;background:DarkSlateBlue;}
% f; s3 L0 f8 Q: W( e- I+ v* j
.js_active .cn_btn:hover{color:MidnightBlue;background:Pink;}
3 a4 O1 |1 | W) j8 x! X
0 V1 j% b C8 x5 r. V
.js_chs .L_CEX,.js_chs .L_DEC,.js_chs .L_EXC,.js_chs .L_DCH,.js_chs .L_ITC{display:inline;}4 O* S# f7 k# G- s! d2 j6 p
.L_CEX,.L_DEC,.L_EXC,.L_DCH,.L_ITC{display:none;}( c5 Z) h- q) h- j
*/

复制代码

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

<link href="test.css" rel="stylesheet" type="text/css"/><script src="test.js"></script>
3 o4 H3 ~" P# x7 O
<div class="test" id="test">' Y! s& o1 a; x
<span class="L_ENT">, Y O% |" E3 G. Q
test2 ], K2 _4 ^4 I
</span>( r, C- t0 F# c
<a name="L_topv">1 r# ~. @; j* F/ v
</a>
1 D. W: q+ s0 P2 g1 W
<div class="L_MRK">
* v" C2 ~' b5 W. @- u
<span class="cn_js" onclick="transChs_test(this)">. l2 r5 V; X2 ?- s% D
<span class="cn_btn" title="Chinese on/off">
* c9 t8 b; C; Q' f7 ^1 N* u
Chs ?. H1 x7 J L& a& ~9 E* `2 r
</span>, ]1 o* E+ S5 e3 P7 v2 z
</span>1 b* L2 c4 t: f( @8 v, d) {
...( }+ D+ C0 l1 R( A* p. {
...
9 H3 a, G' Q% ~, l, p
...

复制代码

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

idict 发表于 2016-9-25 12:50
9 X: w" I8 n$ T& U( J* `- F$ }在下不会css/js和排版. 之前有参考阅读大神的帖子. 偶有心得, 不作参考.
- O9 {5 I- c& M$ z3 D都是大神们的大作, 抱歉忘记 ...

谢谢分享心得。

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

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

谢谢

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

lxchen2001 发表于 2016-9-25 16:47
# V7 U; ?5 _+ r) X9 z谢谢分享心得。 2 a6 f. c- |5 _7 |8 N( {
7 K' c6 g! P- h; u- O+ c% f0 t' z
点击本元素来调整css的配置, 挺好的想法。虽然和我的用法不一样，但明白思路了。

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

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

见附件如下, 不作参考.

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

idict 发表于 2016-9-25 12:509 L3 u X: G4 B' A7 j
在下不会css/js和排版. 之前有参考阅读大神的帖子. 偶有心得, 不作参考.3 G! a* y6 u5 H# n' m) w
都是大神们的大作, 抱歉忘记 ...

颜值很高

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

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

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

fnaviwwo1 发表于 2016-9-29 20:232 l& q. k8 P, V
我记得LZ一开始是用.style.display ='none '？现在的写法有什么优点么？

都可行

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

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

idict 发表于 2016-9-26 13:56
& O% ^, ~9 l6 F, W5 H- u. L居然忘记上载文件了, 怪不得积分没有上涨啦, 才半分啊...+ u$ t3 F1 E! @; X& k7 u0 i ]

3 s. Y. \2 _' {9 D' y, V2 p只得重做, 之前的删除了.

很好的想法，谢谢！

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

lxchen2001 发表于 2016-9-25 02:32! G+ s( T( p5 s% O$ @5 v6 \
后来发现这段代码在MDICT中不能很好应用，在GD中是没问题。% B- c! J+ G# B8 K8 h
y2 Y3 y3 r* C, ^$ S& ~
也发现另外的问题，比如一个页面中有多 ...

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

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

jiangws 发表于 2016-10-1 23:06
: M2 `' n2 Z/ a使用this.nextElementSibling，对词典的排版要求很高，要作全面的检查，但效果很好的。

嗯是的

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

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

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

本帖子中包含更多资源

本帖子中包含更多资源

本帖子中包含更多资源

本帖子中包含更多资源