简单易用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
! R$ b2 B' s4 ?2 h4 S3 _好办法，谢谢分享。

后来发现这段代码在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) {
& o" L. c, o; c- H
if (ele.className == 'js_active') {1 v# e6 b. W1 X5 }( Y T
ele.className = '';
1 ? d' i) u7 b& L3 `5 D- S
document.getElementById('test').className = '';
5 `( l" r1 A+ f5 m) R
} else {
& V( {0 n' F, J# m2 s
document.getElementById('test').className = 'js_chs';
; ^& i3 T' j( m* L2 _& W( x- y
ele.className = 'js_active'
. Q$ K+ T5 \; Q6 ?, ~' ?" X
}0 x: u. Z& r3 K+ X
}

复制代码

css部分

/* default: chinese */
- F( n3 C' Q) J: J
1 ~1 c; }$ L: ~; j
.cn_btn{font-weight:bold;color:White;background-color:DarkSlateBlue;padding-left:5px;margin-right:10px;cursor:pointer;}* m: S$ H z1 o0 Q
.cn_btn:hover{color:MidnightBlue;background-color:Pink;}! I( W. l6 ~% `( h- s7 ]
.js_active .cn_btn{font-weight:bold;color:Gray;background:Gainsboro;}
! j" _8 w$ Y! B' t, b! a# \
.js_active .cn_btn:hover{color:MidnightBlue;background:Pink;}
' y& P. j9 z9 B. V
1 f; `8 a2 Z0 M1 H) k
.js_chs .L_CEX,.js_chs .L_DEC,.js_chs .L_EXC,.js_chs .L_DCH,.js_chs .L_ITC{display:none;}
3 Q; M, L, g2 S5 W: {0 w" z
. v) _# t; z. ~- v
- \8 Y( d5 v) v' [( i; r4 w/ m" }
/* default: no chinese */
: P0 x8 \9 m1 h1 g( c
/*' O L: K# K* A% v/ G/ Z7 ^4 d5 Q
.cn_btn{font-weight:bold;color:Gray;background-color:Gainsboro;padding-left:5px;margin-right:10px;cursor:pointer;}% `* e9 r) l9 _. b
.cn_btn:hover{color:MidnightBlue;background-color:Pink;}
6 w3 V2 \0 U5 l! N- L
.js_active .cn_btn{font-weight:bold;color:White;background:DarkSlateBlue;}8 ]* Q# u3 a/ c$ _: z
.js_active .cn_btn:hover{color:MidnightBlue;background:Pink;}6 t8 w. N3 d8 E- ?+ X" Z" Z/ a0 V9 @8 L
' S6 i! e3 n4 ^ W q; I
.js_chs .L_CEX,.js_chs .L_DEC,.js_chs .L_EXC,.js_chs .L_DCH,.js_chs .L_ITC{display:inline;}) r- m6 m5 b6 j, x4 |
.L_CEX,.L_DEC,.L_EXC,.L_DCH,.L_ITC{display:none;}
1 F! }5 C- D/ ]* I. J! K4 A% q9 g
*/

复制代码

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

<link href="test.css" rel="stylesheet" type="text/css"/><script src="test.js"></script>; u2 N. S5 G6 t( u) X
<div class="test" id="test">
. M1 e, ]# N" y5 u
<span class="L_ENT">
h: u: H) B9 X
test
+ R& @" ]6 j2 }$ X- P& Y
</span># k6 [/ [' c4 d. b5 T
<a name="L_topv">
1 R5 i' X9 j `# C; {- C1 ?$ K
</a>* V) f9 p7 z% Z4 b3 t. ` Q2 N
<div class="L_MRK">
# b. c. K1 s5 ]9 X6 ^6 p+ w
<span class="cn_js" onclick="transChs_test(this)">2 X+ z& r& d5 W# I
<span class="cn_btn" title="Chinese on/off">
& y4 c* ^- ^* e2 u0 _$ q, l& w( z
Chs
$ d5 k7 U8 f9 v4 B
</span>( r8 z, ]9 ]. D9 U
</span>
4 h) \8 M6 L) U7 a+ Y% i% Z) L6 C0 T) d
...
1 O2 T# b6 a- \5 h$ V/ F
...
4 M7 q: M+ T+ ]; y- b" [6 a1 h0 P. y
...

复制代码

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

idict 发表于 2016-9-25 12:50
5 R( u0 B# v3 c' Z/ c+ |在下不会css/js和排版. 之前有参考阅读大神的帖子. 偶有心得, 不作参考.9 Y q, D; Y% ^5 ?$ r
都是大神们的大作, 抱歉忘记 ...

谢谢分享心得。

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

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

谢谢

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

lxchen2001 发表于 2016-9-25 16:47 x C+ q! w2 N$ O7 m
谢谢分享心得。 ; u+ s3 k) v4 N! q
8 K5 y ^7 R1 y( m
点击本元素来调整css的配置, 挺好的想法。虽然和我的用法不一样，但明白思路了。

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

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

见附件如下, 不作参考.

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

idict 发表于 2016-9-25 12:50
8 L: c" `$ r: H在下不会css/js和排版. 之前有参考阅读大神的帖子. 偶有心得, 不作参考.: w8 _3 ~ l2 X. w+ K
都是大神们的大作, 抱歉忘记 ...

颜值很高

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

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

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

fnaviwwo1 发表于 2016-9-29 20:23
( X2 |# h- d" R* C2 [& L我记得LZ一开始是用.style.display ='none '？现在的写法有什么优点么？

都可行

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

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

idict 发表于 2016-9-26 13:56& e& g+ w/ |, q1 P2 w; m# g
居然忘记上载文件了, 怪不得积分没有上涨啦, 才半分啊...
! i2 Q6 r4 i7 ]
3 h, N) W9 [( i8 _8 d5 z只得重做, 之前的删除了.

很好的想法，谢谢！

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

lxchen2001 发表于 2016-9-25 02:32
) `' `9 X1 w5 B8 i; a5 W/ i8 a后来发现这段代码在MDICT中不能很好应用，在GD中是没问题。/ m% E( U5 l& N- j3 ]

* D2 S5 O- ?4 z" Z也发现另外的问题，比如一个页面中有多 ...

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

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

jiangws 发表于 2016-10-1 23:069 i# a' m$ Y; g3 ~
使用this.nextElementSibling，对词典的排版要求很高，要作全面的检查，但效果很好的。

嗯是的

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

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

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

本帖子中包含更多资源

本帖子中包含更多资源

本帖子中包含更多资源

本帖子中包含更多资源