简单易用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+ s9 I. B' u Q0 [( @
好办法，谢谢分享。

后来发现这段代码在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) {
0 v, R, E8 X) d( B. t3 O
if (ele.className == 'js_active') {* `/ k7 M$ A) U7 \7 Y1 \2 e
ele.className = '';
9 `+ s1 A% K3 p: A- b& W
document.getElementById('test').className = '';
% k0 K' z* m7 w$ v
} else {6 J( Z- r5 w; M, A2 M+ c7 H9 C
document.getElementById('test').className = 'js_chs';/ y! ?' d% m+ p6 B5 i
ele.className = 'js_active'2 ^) w: B: l0 ?, b- d; w$ H
}2 X* w' a. |* l# M$ y2 p+ M
}

复制代码

css部分

/* default: chinese */
* g1 a: O3 _; V! t) z+ `
) h* z: F2 s: w& F7 u& u7 `
.cn_btn{font-weight:bold;color:White;background-color:DarkSlateBlue;padding-left:5px;margin-right:10px;cursor:pointer;}
) K8 d. W \$ V7 W/ L
.cn_btn:hover{color:MidnightBlue;background-color:Pink;}+ I$ k% x# h2 Q2 `. O
.js_active .cn_btn{font-weight:bold;color:Gray;background:Gainsboro;}; H) }# O4 T% M1 p0 N& y9 V
.js_active .cn_btn:hover{color:MidnightBlue;background:Pink;}
/ I! ^2 T+ |5 K- m0 c; X% t
# v' G$ F; z) c
.js_chs .L_CEX,.js_chs .L_DEC,.js_chs .L_EXC,.js_chs .L_DCH,.js_chs .L_ITC{display:none;}7 ?% T$ @' k2 R' g" o% {
, S) t( M u, K0 P9 m0 |3 Q; ^6 F
) `6 y4 E) }) W
/* default: no chinese */
* M/ F+ T0 u( G+ \5 _; N1 V
/*
8 B2 |2 x+ Q/ Y& X2 U j; U+ N
.cn_btn{font-weight:bold;color:Gray;background-color:Gainsboro;padding-left:5px;margin-right:10px;cursor:pointer;}
9 s# G" P& J2 e& u* H
.cn_btn:hover{color:MidnightBlue;background-color:Pink;}
9 Z0 f* _) B8 I$ |, A1 o
.js_active .cn_btn{font-weight:bold;color:White;background:DarkSlateBlue;}' x O; g6 r Y: }
.js_active .cn_btn:hover{color:MidnightBlue;background:Pink;}) A# E7 y9 o) s, H9 C0 W
9 x3 @* f8 z1 ?+ f
.js_chs .L_CEX,.js_chs .L_DEC,.js_chs .L_EXC,.js_chs .L_DCH,.js_chs .L_ITC{display:inline;}
) h5 J; ^/ ]+ B1 P
.L_CEX,.L_DEC,.L_EXC,.L_DCH,.L_ITC{display:none;}
+ s8 O. S( ^! ~3 N& Y: w
*/

复制代码

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

<link href="test.css" rel="stylesheet" type="text/css"/><script src="test.js"></script>
* k4 m; q3 I2 E
<div class="test" id="test">; K) C" U, ~9 F1 m% a& G
<span class="L_ENT">
( k ]; V! P' @6 q
test9 p8 ]/ p! `, q) Z$ q" q4 X
</span>/ n! D% K4 X% s
<a name="L_topv">& `* g& H& T% X0 I l1 s
</a>
3 Z- v& `. I, \
<div class="L_MRK">, U7 b4 G$ U9 ~: W/ z: Y
<span class="cn_js" onclick="transChs_test(this)">
) ]4 I% o' A. Z6 A Y7 N+ Q
<span class="cn_btn" title="Chinese on/off">
; C! b! L3 M1 z2 _9 g0 U) i
Chs
' R7 e/ @7 e2 ^2 ~5 ?; t$ V
</span>& `$ v4 {$ a, ]9 a
</span>: o9 j; _/ r4 D& D% o( e6 R
...$ c5 _* h0 o8 d9 f/ n/ {
...7 \ N9 w, T3 O1 R* @1 ~
...

复制代码

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

idict 发表于 2016-9-25 12:50
! F: m- v* c: n: _. N# S在下不会css/js和排版. 之前有参考阅读大神的帖子. 偶有心得, 不作参考.- h2 T M8 B- H8 [: G4 `# f
都是大神们的大作, 抱歉忘记 ...

谢谢分享心得。

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

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

谢谢

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

lxchen2001 发表于 2016-9-25 16:47' i* R+ n4 R- B# c; m
谢谢分享心得。
b0 c+ n' Y5 w- B7 B* a2 v) [& Y7 n! b) J; `4 i
点击本元素来调整css的配置, 挺好的想法。虽然和我的用法不一样，但明白思路了。

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

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

见附件如下, 不作参考.

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

idict 发表于 2016-9-25 12:50+ C6 f6 Y# W; T6 \! y- l
在下不会css/js和排版. 之前有参考阅读大神的帖子. 偶有心得, 不作参考.
, `1 l3 t5 {' x4 ]6 S7 I/ ^0 j! ?8 o都是大神们的大作, 抱歉忘记 ...

颜值很高

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

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

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

fnaviwwo1 发表于 2016-9-29 20:23) i: l U, ?. |0 @, q
我记得LZ一开始是用.style.display ='none '？现在的写法有什么优点么？

都可行

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

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

idict 发表于 2016-9-26 13:566 r8 {: Y( a# k4 M) m) s5 x% I N" X `
居然忘记上载文件了, 怪不得积分没有上涨啦, 才半分啊...) f3 m6 h* P, m2 L6 `2 B* f5 d
5 h! i6 _/ C0 M5 g( \5 Y! p
只得重做, 之前的删除了.

很好的想法，谢谢！

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

lxchen2001 发表于 2016-9-25 02:32
+ a7 j6 u) w* b) ?后来发现这段代码在MDICT中不能很好应用，在GD中是没问题。7 v9 G- b, X8 D

9 V; E/ @. m( @( r _也发现另外的问题，比如一个页面中有多 ...

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

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

jiangws 发表于 2016-10-1 23:06
/ G8 E3 }6 `8 J: }使用this.nextElementSibling，对词典的排版要求很高，要作全面的检查，但效果很好的。

嗯是的

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

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

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

本帖子中包含更多资源

本帖子中包含更多资源

本帖子中包含更多资源

本帖子中包含更多资源