简单易用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
4 l# K" W7 a+ ~5 A) w好办法，谢谢分享。

后来发现这段代码在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) {
8 Z g* t9 x$ G/ a! P" v$ b: S
if (ele.className == 'js_active') {4 `+ c; V; |1 N
ele.className = '';
4 y, k0 C7 W5 C1 S! g6 T% A5 ?
document.getElementById('test').className = '';
/ d9 j4 m1 p5 u% m$ N o$ h
} else {
w, P; A8 s. s5 r
document.getElementById('test').className = 'js_chs';+ W0 x c7 q9 Z( c e
ele.className = 'js_active'/ e# M$ f3 s/ ^ A% t4 o: j
}
9 b, E# b4 \$ _4 E s( l
}

复制代码

css部分

/* default: chinese */4 H& Q- @+ ]; j! F( V
6 q7 B+ v$ p p# |* A: U
.cn_btn{font-weight:bold;color:White;background-color:DarkSlateBlue;padding-left:5px;margin-right:10px;cursor:pointer;}) P7 E/ ?3 B3 C5 z8 R
.cn_btn:hover{color:MidnightBlue;background-color:Pink;}9 {1 u# p; |3 c3 D4 G( F1 k
.js_active .cn_btn{font-weight:bold;color:Gray;background:Gainsboro;}
9 ]& Q, T: t$ A, @: J+ f3 |* ~
.js_active .cn_btn:hover{color:MidnightBlue;background:Pink;}
+ n' R Q% T" ^; V
* s5 Q: N) J! X: |. \
.js_chs .L_CEX,.js_chs .L_DEC,.js_chs .L_EXC,.js_chs .L_DCH,.js_chs .L_ITC{display:none;}
* v. u( K1 _+ t2 U0 m& Z; {- f4 L
$ E% S; x! d6 q, c$ y2 I, ]' G5 n
& d9 v4 I* `2 O+ t) b
/* default: no chinese */( G+ d2 \ g$ H8 c, @; M; S7 Q
/*) I; B* Y! I/ X& x. m
.cn_btn{font-weight:bold;color:Gray;background-color:Gainsboro;padding-left:5px;margin-right:10px;cursor:pointer;}" H5 X6 V, e/ u: _2 c9 M
.cn_btn:hover{color:MidnightBlue;background-color:Pink;}
9 `% H9 a* E% M. |0 S5 u+ g
.js_active .cn_btn{font-weight:bold;color:White;background:DarkSlateBlue;}: [% z1 n" K; \) J
.js_active .cn_btn:hover{color:MidnightBlue;background:Pink;}
" t7 E! u' y) H' K w7 [
3 z7 b# G1 {/ S4 m* V8 x/ U: C3 [
.js_chs .L_CEX,.js_chs .L_DEC,.js_chs .L_EXC,.js_chs .L_DCH,.js_chs .L_ITC{display:inline;}: L+ J A* G$ O0 T4 c* Q( \
.L_CEX,.L_DEC,.L_EXC,.L_DCH,.L_ITC{display:none;}
2 l, g A8 C3 t0 p! E/ a8 N7 b
*/

复制代码

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

<link href="test.css" rel="stylesheet" type="text/css"/><script src="test.js"></script>9 ?' P7 t) \) Z7 m9 [6 H
<div class="test" id="test">( z5 O" e/ e3 H
<span class="L_ENT">2 Z. n7 [7 L0 {3 U, _2 _
test* Z& T) r% Y- F
</span>
, H6 T( d( a/ w( L5 e" e0 J% [
<a name="L_topv">! L7 t# O6 v- D8 U+ V/ v
</a>
, z) C; b2 o" h: [* F4 o; I- p" w
<div class="L_MRK">
4 V N) j$ y0 T. y0 z
<span class="cn_js" onclick="transChs_test(this)">
6 G% k3 D, x) u, [3 ?
<span class="cn_btn" title="Chinese on/off">
& G/ u+ ~- @5 [2 m& K
Chs5 t) \) h5 Q; Y* a, }! r0 `4 {
</span>' Q E& p, R3 \+ f5 S
</span>) B9 W" B' O6 j# `2 z: h( r
...5 z; \: X; W3 d O4 o- d
...1 e3 e$ U7 D1 n& w8 A
...

复制代码

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

idict 发表于 2016-9-25 12:50
$ T- Z' O8 k6 I在下不会css/js和排版. 之前有参考阅读大神的帖子. 偶有心得, 不作参考.7 P P3 R: o+ l6 ~( ?4 m& A
都是大神们的大作, 抱歉忘记 ...

谢谢分享心得。

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

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

谢谢

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

lxchen2001 发表于 2016-9-25 16:47
2 V" ^+ \% E8 S& J4 [+ N谢谢分享心得。
8 i- ?: K/ U L3 J+ |% Q. y. r' L) E
点击本元素来调整css的配置, 挺好的想法。虽然和我的用法不一样，但明白思路了。

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

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

见附件如下, 不作参考.

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

idict 发表于 2016-9-25 12:50
8 ^! @: ? e$ d8 `( Q* s在下不会css/js和排版. 之前有参考阅读大神的帖子. 偶有心得, 不作参考.6 ?+ j2 o* X( N# @* u
都是大神们的大作, 抱歉忘记 ...

颜值很高

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

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

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

fnaviwwo1 发表于 2016-9-29 20:231 T$ b3 c$ f m! ~7 h
我记得LZ一开始是用.style.display ='none '？现在的写法有什么优点么？

都可行

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

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

idict 发表于 2016-9-26 13:561 { W) g# }' H4 f
居然忘记上载文件了, 怪不得积分没有上涨啦, 才半分啊...
7 H; w+ b; `3 t6 q5 [% ?' o) @: B, H! U6 r
只得重做, 之前的删除了.

很好的想法，谢谢！

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

lxchen2001 发表于 2016-9-25 02:32
- G" X, F" T1 v8 p2 O# T3 h' J8 u后来发现这段代码在MDICT中不能很好应用，在GD中是没问题。; R/ ?' v! Y4 a

~: t( p/ k; P! p' P也发现另外的问题，比如一个页面中有多 ...

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

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

jiangws 发表于 2016-10-1 23:06
' ?4 C; p1 c. S4 ~使用this.nextElementSibling，对词典的排版要求很高，要作全面的检查，但效果很好的。

嗯是的

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

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

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

本帖子中包含更多资源

本帖子中包含更多资源

本帖子中包含更多资源

本帖子中包含更多资源