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

最新推荐文章于 2023-03-28 20:17:29 发布

原创最新推荐文章于 2023-03-28 20:17:29 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

网页专栏收录该内容

33 篇文章

订阅专栏

这个HTML示例展示了如何创建一个二级列表，并通过JavaScript实现点击列表项时变色的效果。当点击某个<h3>标题时，其他标题背景色恢复默认，而当前点击的标题背景色变为#0FC。每个标题下对应的<p>段落默认隐藏，通过添加锚点链接到相应段落实现显示和隐藏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>