JavaScript基础14-使用css和JavaScript实现多个div只有一个展开 其他闭合,innerText和innerHTML区别

dom树标签结构:初步代码:及初步默认展示效果

JavaScript基础14-使用css和JavaScript实现多个div只有一个展开 其他闭合,innerText和innerHTML区别

初步默认展示效果:

JavaScript基础14-使用css和JavaScript实现多个div只有一个展开 其他闭合,innerText和innerHTML区别

对最开始的div  a  td 等增加css样式熟悉:代码

JavaScript基础14-使用css和JavaScript实现多个div只有一个展开 其他闭合,innerText和innerHTML区别

增加css演示后的展示效果:

JavaScript基础14-使用css和JavaScript实现多个div只有一个展开 其他闭合,innerText和innerHTML区别

JavaScript+css控制 展开闭合1:代码

JavaScript基础14-使用css和JavaScript实现多个div只有一个展开 其他闭合,innerText和innerHTML区别

补充JavaScript代码:

JavaScript基础14-使用css和JavaScript实现多个div只有一个展开 其他闭合,innerText和innerHTML区别

效果:

JavaScript基础14-使用css和JavaScript实现多个div只有一个展开 其他闭合,innerText和innerHTML区别

补充代码,只能有一个div展开时,其他全部闭合:

JavaScript基础14-使用css和JavaScript实现多个div只有一个展开 其他闭合,innerText和innerHTML区别

效果:已经达到了 只展开一个 div的 效果:

JavaScript基础14-使用css和JavaScript实现多个div只有一个展开 其他闭合,innerText和innerHTML区别

innerText 会被直接展示不会被解析;innerHTML 里面的内容会别浏览器解析:

例如;innerText 代码:

JavaScript基础14-使用css和JavaScript实现多个div只有一个展开 其他闭合,innerText和innerHTML区别

innerText 效果:

JavaScript基础14-使用css和JavaScript实现多个div只有一个展开 其他闭合,innerText和innerHTML区别

innerHtml代码:

JavaScript基础14-使用css和JavaScript实现多个div只有一个展开 其他闭合,innerText和innerHTML区别

innerHTML 效果:

JavaScript基础14-使用css和JavaScript实现多个div只有一个展开 其他闭合,innerText和innerHTML区别