简单易用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+ t: N! g* C7 n$ n1 b( [& D3 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) {
" @" w/ A2 c d3 V- M
if (ele.className == 'js_active') {0 _: y' A' s+ H; i, q/ }3 r
ele.className = '';
3 g4 S0 m8 I& k3 l" S! c; X
document.getElementById('test').className = '';7 Q% D$ F/ [1 z2 P7 [( y
} else {% |/ h6 @8 B" t2 o0 }. C+ _# d
document.getElementById('test').className = 'js_chs';# j! ?0 ]4 z+ a; h E7 e. d
ele.className = 'js_active'1 d+ q, J3 V5 T9 A( r1 z
}/ w5 x) Q1 |( H/ k7 ]
}

复制代码

css部分

/* default: chinese */
7 r3 Z; T; n8 U' v7 u" g; q& V
' h1 q" M) m* y% R
.cn_btn{font-weight:bold;color:White;background-color:DarkSlateBlue;padding-left:5px;margin-right:10px;cursor:pointer;}
0 t' v; D3 \ b- p/ D) M8 f
.cn_btn:hover{color:MidnightBlue;background-color:Pink;}1 \3 b+ ^1 G$ U( |4 K
.js_active .cn_btn{font-weight:bold;color:Gray;background:Gainsboro;}% `! Z z' O, V, J( J1 b
.js_active .cn_btn:hover{color:MidnightBlue;background:Pink;}" [ C7 {* Z7 c/ n
. d; k+ U6 E q% ]) R
.js_chs .L_CEX,.js_chs .L_DEC,.js_chs .L_EXC,.js_chs .L_DCH,.js_chs .L_ITC{display:none;}0 P3 k. u. q1 Y# J7 N, B
( z8 } U% d) m# l9 R
4 Z" }( `7 x0 j: n- L
/* default: no chinese */* c* n# d" e* _$ |7 V! w
/*
" l8 e* I( e* f2 ]3 F3 F
.cn_btn{font-weight:bold;color:Gray;background-color:Gainsboro;padding-left:5px;margin-right:10px;cursor:pointer;}
1 v! x8 a6 h" F
.cn_btn:hover{color:MidnightBlue;background-color:Pink;}: S* A, _; I1 U7 ] O$ A
.js_active .cn_btn{font-weight:bold;color:White;background:DarkSlateBlue;}5 c. G. Y2 ~8 d8 l0 N) U
.js_active .cn_btn:hover{color:MidnightBlue;background:Pink;}" t" C5 X4 [" ?2 Z, M6 |; n
^3 S4 n) d% a" j9 g
.js_chs .L_CEX,.js_chs .L_DEC,.js_chs .L_EXC,.js_chs .L_DCH,.js_chs .L_ITC{display:inline;}
- U% c/ V9 x& R2 p' t6 V
.L_CEX,.L_DEC,.L_EXC,.L_DCH,.L_ITC{display:none;}% C D% T5 x% e, J4 |" |8 T
*/

复制代码

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

<link href="test.css" rel="stylesheet" type="text/css"/><script src="test.js"></script>
, g* \$ E. _; K. W3 m
<div class="test" id="test">) i+ ^5 O+ S1 k$ @5 g% _7 h
<span class="L_ENT">& K" T; N/ P& m) L. d7 C4 x
test5 z9 K/ P; g/ M) C u3 I/ u: {
</span>) w. E9 B h$ Y1 T, v- c
<a name="L_topv">7 x5 J2 i6 u: G6 F
</a>
+ ]3 o3 q$ x& u) y/ \
<div class="L_MRK">2 w! S& H, I: R
<span class="cn_js" onclick="transChs_test(this)">
% S! C- q# u4 s% v5 f, c, Q
<span class="cn_btn" title="Chinese on/off">; O D3 }6 _2 w& j7 S9 H& l5 N+ T
Chs
5 N2 L! b! u: @! ]
</span>1 h E' q# L# y$ U" j. K
</span>
$ P1 J* P7 Z4 Q: @* k. d
...* E6 p0 q$ z& ]: C" Z9 C: X
...1 @# ~. X, g b, H- |
...

复制代码

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

idict 发表于 2016-9-25 12:50
" [3 S; `& v( }9 X& u5 j6 y; T在下不会css/js和排版. 之前有参考阅读大神的帖子. 偶有心得, 不作参考.8 M: o* L) f6 y4 U @
都是大神们的大作, 抱歉忘记 ...

谢谢分享心得。

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

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

谢谢

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

lxchen2001 发表于 2016-9-25 16:47' \6 ?+ ~5 l0 g1 N! e! F* ^
谢谢分享心得。
8 h; Z& L) W' x
4 Z' L0 G# H! Q$ I# p( J$ z% Q, }( m* L点击本元素来调整css的配置, 挺好的想法。虽然和我的用法不一样，但明白思路了。

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

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

见附件如下, 不作参考.

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

idict 发表于 2016-9-25 12:50
" u9 f+ f$ z2 a8 V* h在下不会css/js和排版. 之前有参考阅读大神的帖子. 偶有心得, 不作参考.: B% T3 I' \0 u' K7 F" W
都是大神们的大作, 抱歉忘记 ...

颜值很高

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

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

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

fnaviwwo1 发表于 2016-9-29 20:23 L! h! \) W1 N; N
我记得LZ一开始是用.style.display ='none '？现在的写法有什么优点么？

都可行

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

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

idict 发表于 2016-9-26 13:56( E9 p* b( J* g* @' C, }+ f3 i
居然忘记上载文件了, 怪不得积分没有上涨啦, 才半分啊...7 k/ i: [+ d% K' l" U
8 t& B; N; G8 g7 ?6 U
只得重做, 之前的删除了.

很好的想法，谢谢！

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

lxchen2001 发表于 2016-9-25 02:32" ~8 I/ ?1 x' R
后来发现这段代码在MDICT中不能很好应用，在GD中是没问题。4 y3 k. ^' U! }- m& ?8 D( s

2 E0 t4 W0 P! D, c, V/ O# ]也发现另外的问题，比如一个页面中有多 ...

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

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

jiangws 发表于 2016-10-1 23:068 g0 O9 }3 H+ C& I6 B. H3 l
使用this.nextElementSibling，对词典的排版要求很高，要作全面的检查，但效果很好的。

嗯是的

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

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

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

本帖子中包含更多资源

本帖子中包含更多资源

本帖子中包含更多资源

本帖子中包含更多资源