简单易用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
( G3 N/ i- V$ @/ n$ Y7 G好办法，谢谢分享。

后来发现这段代码在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 V9 U0 x \3 f l+ p5 O" w; P
if (ele.className == 'js_active') { F+ `* `7 ~6 V3 J! ^* W3 |$ |( Z
ele.className = '';
' y8 ^+ M2 p4 h/ _- Y/ {; @& z# O: d# n
document.getElementById('test').className = '';8 V) |& t1 x) S" Y6 p
} else {
) ^' q" z# R c& q
document.getElementById('test').className = 'js_chs';3 `/ t) W6 z8 L8 a7 l
ele.className = 'js_active'& i* ^# y: D7 b- k
}( k0 [$ K! e7 Y
}

复制代码

css部分

/* default: chinese */
* T; t1 s$ E, P
+ @2 n2 `$ b& d2 z" y" S
.cn_btn{font-weight:bold;color:White;background-color:DarkSlateBlue;padding-left:5px;margin-right:10px;cursor:pointer;}
, c# h2 S h6 P* _2 c# X
.cn_btn:hover{color:MidnightBlue;background-color:Pink;}7 U% I8 }3 [0 g* N# D
.js_active .cn_btn{font-weight:bold;color:Gray;background:Gainsboro;}
% x: g1 m4 Y/ R! {- N
.js_active .cn_btn:hover{color:MidnightBlue;background:Pink;}' H" f0 {. o* d$ @# }, A. \% X7 f
& I5 Q5 u" \& R+ q$ O7 V
.js_chs .L_CEX,.js_chs .L_DEC,.js_chs .L_EXC,.js_chs .L_DCH,.js_chs .L_ITC{display:none;}
5 E5 F+ G, r# a7 a5 d2 c5 S
1 |( A0 p. u' \ {
! P% i& `4 p: R* | e/ |! U8 a
/* default: no chinese */' e2 e; F, ]% q, q/ o
/*
, G) j+ r7 ~% I6 d; H" S, ^0 i
.cn_btn{font-weight:bold;color:Gray;background-color:Gainsboro;padding-left:5px;margin-right:10px;cursor:pointer;}1 k3 h9 j$ S- ^6 r0 V, O
.cn_btn:hover{color:MidnightBlue;background-color:Pink;}" n) P2 m/ G8 I/ k3 J
.js_active .cn_btn{font-weight:bold;color:White;background:DarkSlateBlue;}! P) F/ \! E* a$ O6 x2 F7 |
.js_active .cn_btn:hover{color:MidnightBlue;background:Pink;}
4 l; M) l5 D2 m, u; Y
7 D! ~: W1 G* ^
.js_chs .L_CEX,.js_chs .L_DEC,.js_chs .L_EXC,.js_chs .L_DCH,.js_chs .L_ITC{display:inline;}, B% |2 s5 e9 ^& W8 Q! D
.L_CEX,.L_DEC,.L_EXC,.L_DCH,.L_ITC{display:none;}
+ }4 [( v/ P! p! |- X- Y& c
*/

复制代码

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

<link href="test.css" rel="stylesheet" type="text/css"/><script src="test.js"></script>
/ V& Q8 F+ J; x& P
<div class="test" id="test">
" r# f9 N" d* b% R7 B0 a1 R
<span class="L_ENT">
3 B( ~4 A/ P# Y; i
test; j( _4 n& o5 L4 F# l: }: E% o
</span>5 @+ B! D& e: p
<a name="L_topv">* G% I) y7 N( }8 x5 Z) t2 G
</a>8 v. X/ i8 n# t. f! V/ B6 l. F& \
<div class="L_MRK">6 A+ X& }; c8 H' U8 C; Z
<span class="cn_js" onclick="transChs_test(this)">3 V3 h7 _+ _# |
<span class="cn_btn" title="Chinese on/off">+ i' |9 L% } u
Chs+ x* M$ u; k1 P% j
</span>
5 Y- o8 S" ~) u( h/ ]! |
</span>5 G7 Y$ s4 S1 q
...
, W& ~- h$ W; y
..." ]& {" N/ m, \( B
...

复制代码

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

idict 发表于 2016-9-25 12:50. X4 U5 i$ S: c% `- N; L- O
在下不会css/js和排版. 之前有参考阅读大神的帖子. 偶有心得, 不作参考.
' n2 m7 [0 w8 n3 E2 `# m都是大神们的大作, 抱歉忘记 ...

谢谢分享心得。

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

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

谢谢

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

lxchen2001 发表于 2016-9-25 16:47
9 E! i+ d' _& B% n6 U谢谢分享心得。 - P$ ^$ h/ L6 {2 I; k

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

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

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

见附件如下, 不作参考.

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

idict 发表于 2016-9-25 12:505 k h4 t; l1 j2 ~* \0 m$ o7 ~
在下不会css/js和排版. 之前有参考阅读大神的帖子. 偶有心得, 不作参考.
6 P: b1 X- D7 x7 @0 A" J都是大神们的大作, 抱歉忘记 ...

颜值很高

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

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

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

fnaviwwo1 发表于 2016-9-29 20:23
/ q. J. I0 |: x我记得LZ一开始是用.style.display ='none '？现在的写法有什么优点么？

都可行

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

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

idict 发表于 2016-9-26 13:56& L; V# n- {& }( {( S' m$ r
居然忘记上载文件了, 怪不得积分没有上涨啦, 才半分啊...
) U& V, s) n( c6 h9 n+ O$ x9 ]% n( ]6 d
只得重做, 之前的删除了.

很好的想法，谢谢！

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

lxchen2001 发表于 2016-9-25 02:320 o5 _" {4 C% A
后来发现这段代码在MDICT中不能很好应用，在GD中是没问题。5 B! G9 o6 n; H; [3 Z

% L8 a6 T0 G6 q0 [2 }也发现另外的问题，比如一个页面中有多 ...

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

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

jiangws 发表于 2016-10-1 23:06
6 j! r; M4 ^; C) ~使用this.nextElementSibling，对词典的排版要求很高，要作全面的检查，但效果很好的。

嗯是的

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

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

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

本帖子中包含更多资源

本帖子中包含更多资源

本帖子中包含更多资源

本帖子中包含更多资源