`
leejian
  • 浏览: 27216 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

js 简单的开关门做法

jstogglehtmlcss 
阅读更多


 利用js实现读取并修改元素的内容

点击“<<”将树形列表隐藏并将“<<”修改为“>>”，点击“>>”后将树形列表显示出来。

实现代码如下：

<!DOCTYPE HTML>
<html>
<head>
<title>读取并修改元素的内容</title>
<meta charset="utf-8" />
<style>
      div{float:left; height: 100px; line-height: 100px; }
      #d1,#d3{ background-color: #ccff00; }
      #d2{ cursor: pointer; background-color: #ffcc00; }
</style>
<script>
 function toggle(d2){
      //注意：d2.innerHTML-->原文 
     //  .textContent-->翻译后的字符
     //如果d2的内容是<<
      if(d2.innerHTML=="&lt;&lt;"){
      //   d2的内容改为>>
      d2.innerHTML="&gt;&gt;";
      //   找到旁边的d1，隐藏
    document.querySelector("#d1").style.display="none";
      }else{//否则
    //   d2的内容改为<<
    d2.innerHTML="&lt;&lt;";
    //   找到旁边的d1，显示出啦
   document.querySelector("#d1").style.display="block";
    }
  }
</script>
</head>
<body>
	<div id="d1">树形列表</div>
	<div id="d2" onclick="toggle(this)">&lt;&lt;</div>
	<div id="d3">内容的主体</div>
</body>
</html>

 

 

 

 

  • 大小: 947 Bytes
  • 大小: 710 Bytes
分享到：
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics