简单易用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
6 T$ b9 C4 t/ v' {/ 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) {
0 n9 ^* B. d& k% p1 _; ~
if (ele.className == 'js_active') {8 |7 U' X7 B" _+ D2 ^
ele.className = '';
. @1 g8 e6 X: x/ n
document.getElementById('test').className = '';
/ A: _( G& n. q3 H& v) y4 }; S
} else {
$ J7 N& @# n" Y+ e, L% Y5 I
document.getElementById('test').className = 'js_chs';
; [3 V+ d) `* y
ele.className = 'js_active'" Y% G) l8 A6 R0 i3 V' o
}
- n: E. j' H, h$ W
}

复制代码

css部分

/* default: chinese */
" {) b& {6 w$ u
5 ?& g0 h8 l. d& j9 S. O
.cn_btn{font-weight:bold;color:White;background-color:DarkSlateBlue;padding-left:5px;margin-right:10px;cursor:pointer;}2 c. o* J# G+ F+ j
.cn_btn:hover{color:MidnightBlue;background-color:Pink;}3 i& ]' `+ Y, C0 s; p9 I; V
.js_active .cn_btn{font-weight:bold;color:Gray;background:Gainsboro;}
+ F, T1 Q, Y6 c; J
.js_active .cn_btn:hover{color:MidnightBlue;background:Pink;}
# Z* ~5 D6 h8 t7 [
7 |) b% Z; V( ?8 ?6 `3 }& ]
.js_chs .L_CEX,.js_chs .L_DEC,.js_chs .L_EXC,.js_chs .L_DCH,.js_chs .L_ITC{display:none;}7 K- F) x( h& N3 g- R# t' W3 Z
( R ?7 [ o# ]7 @2 ~3 C5 t9 s
/ z) \7 a( I7 H8 t1 Q# x
/* default: no chinese */$ b; T% {# b: E J: ^8 C
/*
% M8 l2 k( K! V- }. n
.cn_btn{font-weight:bold;color:Gray;background-color:Gainsboro;padding-left:5px;margin-right:10px;cursor:pointer;}! [" m4 I; }, {# z0 ^/ G' R/ p
.cn_btn:hover{color:MidnightBlue;background-color:Pink;}* q4 q( U3 U) p5 O/ c( S. f9 e
.js_active .cn_btn{font-weight:bold;color:White;background:DarkSlateBlue;}
h* e3 z7 }/ D* L8 C0 l- a) B
.js_active .cn_btn:hover{color:MidnightBlue;background:Pink;}. u/ i1 L0 z- g/ t& ~2 O8 R/ J9 ~
4 Y* H v7 y: c& S1 p% s
.js_chs .L_CEX,.js_chs .L_DEC,.js_chs .L_EXC,.js_chs .L_DCH,.js_chs .L_ITC{display:inline;}
! j7 l$ h# u2 A8 M
.L_CEX,.L_DEC,.L_EXC,.L_DCH,.L_ITC{display:none;}
1 X, I w$ S0 I8 T' `! ?
*/

复制代码

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

<link href="test.css" rel="stylesheet" type="text/css"/><script src="test.js"></script>- n2 G5 }. t4 {' c
<div class="test" id="test">. i* X6 ^% j9 z. d1 ~) b0 {
<span class="L_ENT">7 [. h8 c ~5 P* J
test- G r3 c+ H L0 H/ e
</span>1 z, W% p0 S$ N, o8 q
<a name="L_topv">
6 ^/ F7 Q; C! e u
</a>+ n( @6 ?; q* p6 c. G) d
<div class="L_MRK">
! z$ C5 D E2 ~- U. R; `
<span class="cn_js" onclick="transChs_test(this)">( H2 t7 e) v, L' s/ }) B4 s
<span class="cn_btn" title="Chinese on/off">8 s* Z# K/ u5 u
Chs
N; i. p; s; Y; ~+ @, g0 {/ ^
</span>0 P* u" E, c/ J q+ I5 Y
</span>8 z0 Q' f: @9 x R- l1 b8 ~
...
3 O" b4 ? s- C% K$ ^% `
...
! p; z7 w/ n' U D2 g
...

复制代码

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

idict 发表于 2016-9-25 12:50, f0 j4 K- G- w2 F! V
在下不会css/js和排版. 之前有参考阅读大神的帖子. 偶有心得, 不作参考.
; m& Y7 j7 ?* P4 F8 d8 X4 P都是大神们的大作, 抱歉忘记 ...

谢谢分享心得。

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

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

谢谢

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

lxchen2001 发表于 2016-9-25 16:47: x8 C! H& o. h |- ?5 \
谢谢分享心得。
$ ?! r/ }+ }, U4 ]. z* e
5 B5 t5 ?; T) e5 n- K- c点击本元素来调整css的配置, 挺好的想法。虽然和我的用法不一样，但明白思路了。

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

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

见附件如下, 不作参考.

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

idict 发表于 2016-9-25 12:50
S( R R5 I" N6 o" f k在下不会css/js和排版. 之前有参考阅读大神的帖子. 偶有心得, 不作参考.
7 d9 B- T( l3 Y d9 M1 i W* P都是大神们的大作, 抱歉忘记 ...

颜值很高

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

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

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

fnaviwwo1 发表于 2016-9-29 20:232 Y1 n5 h D# H6 w
我记得LZ一开始是用.style.display ='none '？现在的写法有什么优点么？

都可行

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

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

idict 发表于 2016-9-26 13:56! T' Z) s& b/ f: q, b* }& d# c
居然忘记上载文件了, 怪不得积分没有上涨啦, 才半分啊...

" ?4 u0 p6 R/ \7 R3 J只得重做, 之前的删除了.

很好的想法，谢谢！

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

lxchen2001 发表于 2016-9-25 02:32! W* J' a# k; C2 U
后来发现这段代码在MDICT中不能很好应用，在GD中是没问题。
, b+ x. C0 l( ^! z: ]( e, G7 @% h. U
也发现另外的问题，比如一个页面中有多 ...

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

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

jiangws 发表于 2016-10-1 23:06
& n! p" w- J: A# j, G: j5 h使用this.nextElementSibling，对词典的排版要求很高，要作全面的检查，但效果很好的。

嗯是的

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

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

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

本帖子中包含更多资源

本帖子中包含更多资源

本帖子中包含更多资源

本帖子中包含更多资源