html 实现二级列表,点击会变色

来源：互联网发布：js有没有boolean 编辑：程序博客网时间：2024/04/28 18:08

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
   *{
       margin:0px;
       padding:0px;
   }

   a{
       text-decoration:none;
   }

   h3{
       font-weight:normal;
       line-height:40px;
       background-color:#f5f5f5;
       padding-left:10px;
       border-bottom:1px solid #e0dede;
       color:#000;
   }

   section{
       margin:0px 10px;
       border:1px solid #e0dede;

   }

   p{
       text-indent:2em;
       padding:10px;
       font-size:14px;
       display:none;
   }

   p:target{
       display:block;
   }
</style>
<script>
   window.onload = function(){
       var divs = document.getElementsByTagName("h3");
       var len = divs.length;
       for(var i=0;i<len;i++){
           divs[i].onclick = function(){
               for(var j=0;j<len;j++){
                   divs[j].style.backgroundColor = "#e0dede";
               }
               this.style.backgroundColor = "#0FC";
           };
       }
   };
</script>
</head>
<body>
       <main>
           <section>
               <a href="#item1"><h3>项目一</h3></a>
               <p id="item1">项目一,一</p>
           </section>
           <section >
               <a href="#item2"><h3>项目二</h3></a>
               <p id="item2">项目二,一<br />       项目二,二</p>
           </section>
           <section>
               <a href="#item3"><h3>项目三</h3></a>
               <p id="item3">项目三,一<br />       项目三,二<br />       项目三,三</p>
           </section>
       </main>
</body>
</html>

阅读全文

0 0