本文介绍了一种使用CSS样式和JavaScript实现元素显示隐藏的方法。通过为不同元素设置特定的CSS类，并利用JavaScript来监听特定标签的点击事件，从而实现对相邻元素的显示与隐藏效果。这种方式可以用于创建简洁且交互友好的网页布局。
1
<
style
>
2
A{}{margin-left:20px;width:100px;border:1px solid gray;float:left;clear:both;cursor:hand;}
3 B{}{width:100px;border:1px solid gray;float:left;clear:both;cursor:default;}
4
</
style
>
5
<
B
>
A
</
B
>
6
<
A
>
1
</
A
><
A
>
2
</
A
>
7
<
B
>
B
</
B
>
8
<
A
>
4
</
A
><
A
>
5
</
A
><
A
>
6
</
A
>
9
10
<
SCRIPT
LANGUAGE
="JavaScript"
>
11
var B_Tags=document.getElementsByTagName("B" );
12for(var i=0;i<B_Tags.length;i++)
13{
14 B_Tags[i].onclick=function (){
15 change(event.srcElement);
16 event.cancelBubble=true;
17
}
18}
19var c=0;
20function change(obj)
21{
22 var myobj=obj.nextSibling;
23 while(myobj.tagName!="B" && myobj.tagName!="SCRIPT" )
24 {
25 if(myobj.tagName!=null)
26 {
27 myobj.style.display=(myobj.style.display=="none")?"":"none";
28 }
29 myobj=myobj.nextSibling;
30 }
31
}
32
</
SCRIPT
>
<
style
>
2
A{}{margin-left:20px;width:100px;border:1px solid gray;float:left;clear:both;cursor:hand;} 3
B{}{width:100px;border:1px solid gray;float:left;clear:both;cursor:default;}4
</
style
>
5
<
B
>
A
</
B
>
6
<
A
>
1
</
A
><
A
>
2
</
A
>
7
<
B
>
B
</
B
>
8
<
A
>
4
</
A
><
A
>
5
</
A
><
A
>
6
</
A
>
9
10
<
SCRIPT
LANGUAGE
="JavaScript"
>
11
var B_Tags=document.getElementsByTagName("B" );12
for(var i=0;i<B_Tags.length;i++)13
{14
B_Tags[i].onclick=function (){15
change(event.srcElement);16
event.cancelBubble=true;17
}18
}19
var c=0;20
function change(obj)21
{ 22
var myobj=obj.nextSibling; 23
while(myobj.tagName!="B" && myobj.tagName!="SCRIPT" )24
{ 25
if(myobj.tagName!=null)26
{ 27
myobj.style.display=(myobj.style.display=="none")?"":"none";28
} 29
myobj=myobj.nextSibling; 30
}31
}32
</
SCRIPT
>
扫一扫
818
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
