CodePudding user response:

CodePudding user response:

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<script> 
Var head=document. QuerySelectorAll (' item ') 
Var body=document. QuerySelectorAll (' body ') 
For (the let I=0; IThe head [I] onclick=function () {
Siblings (head [I], 'item') 
Siblings (body [I], 'body') 
The head [I] the className='item active' 
The body [I] the className='body active' 
} 
} 

The function siblings (el, _class) {
Var b=el. ParentNode. Children 
for(var i=0; I & lt; B.l ength; I++) {
If (b [I] nodeType==1 & amp; & B [I]!=el & amp; & B [I] the className. IndexOf (_class) & gt; 1) {
B [I] the className=_class 
} 
} 
} 
</script> 
<style> 
The demo {
Width: 200 px; 
height: 100%; 
} 
. The demo. The content. item {
The line - height: 20 px; 
text-align: center; 
color: #fff; 
Background: green; 
Border - bottom: 1 px # FFF solid; 
} 
. The demo. The content. The item. The active {
Background: red; 
} 
. The demo. The content. body {
Display: none; 
Height: 400 px; 
width: 100%; 
text-align: center; 
Border: # 1 px CCC solid; 
} 
. The demo. The content. The body. The active {
display: block; 
} 
</style>