【html5】05-自定义属性-切换页面-tab栏新闻列表

Mikuc

已于 2024-05-19 11:59:12 修改

阅读量269

点赞数 1

于 2024-05-19 11:58:46 首次发布

本文链接：https://blog.csdn.net/m0_68467925/article/details/139040601

版权

HTML5 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

引言

04篇的自定义小案例

效果

代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style type="text/css">
        	* {
        		 margin: 0;
        		 padding: 0;
        		 list-style: none;
        		 text-decoration: none;
        	}

        	.news {
        		 width: 400px;
        		 height: 400px;
        		 border: 1px solid #ccc;
        		 margin: 50px auto;
        	}
        	.title {
        		 height: 59px;
        		 line-height: 60px;
        		 border-bottom: 1px solid #ccc;
        	}
        	li {
        		 float: left;
        		 width: 100px;
        		 text-align: center;
        		 background-color: #01204f;
        	}
        	li a {
        		 color: #fff;
        	}
        	.content>div {
        		 height: 340px;
        		 background-color: #fff;
        	}

        	.content h2 {
        		 height: 30px;
        		 text-align: center;
        	}

        	.box {
        		 height: 310px;
        	}
        	.box img {
        		vertical-align: bottom;
        	}
			.active {
				 background-color: red;
			}

			.active a {
				 color: #fff;
			}
        	p {
        		 text-indent: 2em;
        	}
        </style>
    </head>
    <body>
		 
		  <div class="news">
		  	  <div class="title">
		  	  	 <ul>
		  	  	 	<li data-title="yl"><a href="#">娱乐新闻</a></li>
		  	  	 	<li data-title="ty" class="active"><a href="#">体育新闻</a></li>
		  	  	 	<li data-title="js"><a href="#">军事天地</a></li>
		  	  	 	<li data-title="qc"><a href="#">汽车天下</a></li>
		  	  	 </ul>
		  	  </div>
		  	  <div class="content">

		  	  	 <div class="yl" style="display: none;" id="yl">
		  	  	  	 <h2>《父子雄兵》</h2>
		  	  	  	 <div class="box">
		  	  	  		 <img src="le.jpg" alt="" width="100%" height="100%">
		  	  	  	 </div>
		  	  	  </div>
		  	  	 
		  	  	  <div class="js" style="display: none;" id="js">
		  	  	  	  <h2>军事</h2>
		  	  	  	  <p>报道中提到，美国国家安全局（NSA）将恶意软件追溯到与朝鲜情报机关有关的IP地址，而黑客组织Lazarus Group似乎是需要为此负责，其背后操控着就是朝鲜当局。</p>
		  	  	  </div>

		  	  	  <div class="qc" style="display: none;" id="qc">
		  	  	  	  <h2>自主轿车恐将被赶出销量前20</h2>
		  	  	  	  <p>在SUV市场热的发紫的环境下，中国品牌纷纷在SUV市场推陈出新。但目前的市场环境来看，中国品牌与合资品牌仍旧对半分。但正因为中国品牌过分重视SUV市场，因小失大。在5月轿车市场的销量排名来看，前20名中仅吉利帝豪EC7一款中国汽车，自主轿车全面被T出销量榜前20，随时都有可能。</p>
		  	  	  </div>

		  	  	   <div class="ty" id="ty" style="display: block;">
		  	  	  	 <h2>勇士NBA总冠军</h2>
		  	  	  	 <div class="box">
		  	  	  	 	<img src="ty.jpg" alt="" width="100%" height="100%">
		  	  	  	 </div>
		  	  	  </div>


		  	  	 

		  	  </div>
		  </div>

		  <script type="text/javascript">
		  		
		  	   			var li=document.querySelectorAll("li");
		  	    	 
				  	    for(var i=0;i<li.length;i++){
				  	    	li[i].onclick=function(){
				  	    		//移除已经存在的active类名
				  	    		var active=document.querySelector(".active");
				  	    			active.classList.remove("active");

				  	    		//移除已经显示出来的div
				  	    		document.getElementById(active.dataset["title"]).style.display="none";

				  	    		//当前标签添加active类名
				  	    		this.classList.add("active");

				  	    		//获取当前选中li标签的自定义属性值
				  	    		var data_vale=this.dataset["title"];

				  	    		//根据当前获取自定义属性值获取对应的div标签
				  	    		
				  	    		var  div=document.getElementById(data_vale);
				  	    		//显示当前对应的div
				  	    			 div.style.display="block";

				  	    	}
				  	    }
		  </script>
    </body>
</html>