简单易用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:483 g4 p- { j4 N% m( ~
好办法，谢谢分享。

后来发现这段代码在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) {, P: B* p* j- a4 U K. s
if (ele.className == 'js_active') {1 K' ]8 z* V& U6 f
ele.className = '';
1 t- U* K6 \+ j9 Y( `
document.getElementById('test').className = '';5 ?! t4 D4 }; t1 ]( a( k. l& r: v
} else {
5 I; j% r+ k! f
document.getElementById('test').className = 'js_chs';
& W7 B& j# |7 a7 w* {; U. J; S/ @
ele.className = 'js_active'
* `5 D7 F- n# c: N' [
}
3 |5 `2 e+ q5 H7 f1 O' h# @& {: {5 g, T
}

复制代码

css部分

/* default: chinese */
, Z8 N. R1 Y" R& D% K1 o# ^4 z& x
! }2 x, i7 e1 `. A; p7 y1 w
.cn_btn{font-weight:bold;color:White;background-color:DarkSlateBlue;padding-left:5px;margin-right:10px;cursor:pointer;}3 r; v E: _1 k: [7 }" v
.cn_btn:hover{color:MidnightBlue;background-color:Pink;}3 P1 ?. N- t' w8 U& \
.js_active .cn_btn{font-weight:bold;color:Gray;background:Gainsboro;}
& C5 E% _1 @6 Y: Y7 }6 @; U) E
.js_active .cn_btn:hover{color:MidnightBlue;background:Pink;}& y: A* z* T: f8 p5 l$ B4 N. U) C5 U* V
# t7 B& r+ H% t3 @1 D$ x. C. B6 X
.js_chs .L_CEX,.js_chs .L_DEC,.js_chs .L_EXC,.js_chs .L_DCH,.js_chs .L_ITC{display:none;}5 k7 e) m6 R3 d3 @
$ o' r4 v( |( x' H; i
8 U" x0 B! L. r9 \
/* default: no chinese */
' ~1 P3 V$ s* Y4 d5 E% j
/*
0 F* k0 x7 N4 [- N2 ]7 B6 T/ z \. f
.cn_btn{font-weight:bold;color:Gray;background-color:Gainsboro;padding-left:5px;margin-right:10px;cursor:pointer;}
: [* R" j/ c7 J+ Q P9 s7 j
.cn_btn:hover{color:MidnightBlue;background-color:Pink;}( V8 f, W: E$ X' d' F7 u
.js_active .cn_btn{font-weight:bold;color:White;background:DarkSlateBlue;}' }8 I0 I1 d9 V. q F: @
.js_active .cn_btn:hover{color:MidnightBlue;background:Pink;}* r% z* _7 T% ~
`4 Z, Z. z( \" x R& A! Z5 G
.js_chs .L_CEX,.js_chs .L_DEC,.js_chs .L_EXC,.js_chs .L_DCH,.js_chs .L_ITC{display:inline;}
1 }, }/ M) L- W! C
.L_CEX,.L_DEC,.L_EXC,.L_DCH,.L_ITC{display:none;}
' v; u/ h5 |! x5 N2 K. X
*/

复制代码

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

<link href="test.css" rel="stylesheet" type="text/css"/><script src="test.js"></script>
$ Q9 j0 ^) g! u5 `) r) c
<div class="test" id="test">
, F3 @- q# P* w# |
<span class="L_ENT">% V) d2 q4 m$ x( v
test
! e; H0 x3 c- g0 j2 \
</span>6 m2 |" }: O1 _4 }
<a name="L_topv">0 ?9 l# A: n7 S; m9 e2 J& v
</a>4 L: k" w2 D+ s/ j/ V( ~3 I
<div class="L_MRK">
) R4 V# V" {4 t, ~
<span class="cn_js" onclick="transChs_test(this)">; H& i/ R/ { U: f* B
<span class="cn_btn" title="Chinese on/off">
) u2 p% a, a4 v: h! n7 z0 z
Chs; R/ A. f: u" o3 [9 I9 |! e6 p# Z
</span>
" h7 N: u9 I8 O" g' W. |# U/ @( ^
</span>8 T3 ?: Q$ J: }. o, V2 t8 R. n/ q
...
. e; N+ S* j: J: _
...) G3 s K! L$ f) b& r" M P
...

复制代码

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

idict 发表于 2016-9-25 12:50
% f5 k: K+ u: N/ L/ B5 }在下不会css/js和排版. 之前有参考阅读大神的帖子. 偶有心得, 不作参考.1 O% m N+ O, A j: P
都是大神们的大作, 抱歉忘记 ...

谢谢分享心得。

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

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

谢谢

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

lxchen2001 发表于 2016-9-25 16:47% _# Q) [4 b9 ]; A; H
谢谢分享心得。
2 r' B( i, T, {6 C2 x0 B6 n' J s6 @5 e
点击本元素来调整css的配置, 挺好的想法。虽然和我的用法不一样，但明白思路了。

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

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

见附件如下, 不作参考.

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

idict 发表于 2016-9-25 12:504 c4 l! Z/ M8 Y
在下不会css/js和排版. 之前有参考阅读大神的帖子. 偶有心得, 不作参考.
. p ?" P0 [4 R5 f5 x- |8 b都是大神们的大作, 抱歉忘记 ...

颜值很高

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

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

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

fnaviwwo1 发表于 2016-9-29 20:23, X' j6 }- g% h& j
我记得LZ一开始是用.style.display ='none '？现在的写法有什么优点么？

都可行

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

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

idict 发表于 2016-9-26 13:569 }: g6 E) R& S' A# e9 k
居然忘记上载文件了, 怪不得积分没有上涨啦, 才半分啊...% z: p0 a' X6 F
* t7 {$ c& L3 G& b1 X7 X5 K9 _- W5 u
只得重做, 之前的删除了.

很好的想法，谢谢！

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

lxchen2001 发表于 2016-9-25 02:32: [6 N4 Y c3 t6 u$ m% m
后来发现这段代码在MDICT中不能很好应用，在GD中是没问题。
Z1 w* F2 q% M$ G/ g% W1 i; } ~& J
也发现另外的问题，比如一个页面中有多 ...

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

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

jiangws 发表于 2016-10-1 23:06
( g; A6 j6 v7 i( p使用this.nextElementSibling，对词典的排版要求很高，要作全面的检查，但效果很好的。

嗯是的

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

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

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

本帖子中包含更多资源

本帖子中包含更多资源

本帖子中包含更多资源

本帖子中包含更多资源