JavaScript——Tab切换

最新推荐文章于 2023-06-04 22:01:17 发布

我不抽烟zzm

最新推荐文章于 2023-06-04 22:01:17 发布

阅读量237

点赞数

本文链接：https://blog.csdn.net/qq_35052286/article/details/72871382

版权

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
  *{
  margin:0px;
  padding:0px;
  }
	#d1{
	border:1px solid red;
	width:500px;
	height:300px;
	}
	ul li{
	list-style:none;
	float:left;
	width:90px;
	height:20px;
	text-align:center;
	border:1px solid red;
	} 
	ul{
	height:50px;
	}
	#div1,#div2,#div3,#div4{
	display:none;
	}
	#div1{
	display:block;
	}
  </style>
  <script type="text/javascript">
  <!--
	 function showDiv(n,m){
		 //把所有的div内容都得隐藏
		 for(var i=1;i<=4;i++){
		 var AllDiv=document.getElementById("div"+i);
		 AllDiv.style.display="none";
		 }
		 //把所有得li边框显示。
		  for(var j=1;j<=4;j++){
		  var AllLi=document.getElementById("li"+j);
		  AllLi.style.border="1px solid red";
		  }
		 //获取div对象
	 var obj=document.getElementById("div"+n);
	 obj.style.display="block"
	 m.style.borderBottom="white";
	 }
  //-->
  </script>
 </head>
 <body>
  <div id="d1">
	<ul>
		<li id="li1" οnmοuseοver="showDiv(1,this)">国际新闻</li>
		<li id="li2" οnmοuseοver="showDiv(2,this)">国内新闻</li>
		<li id="li3" οnmοuseοver="showDiv(3,this)">体育新闻</li>
		<li id="li4" οnmοuseοver="showDiv(4,this)">娱乐新闻</li>
		<li></li>
	</ul>
	    <div id="div1">国际新闻：1</div>
		<div id="div2">国内新闻：2</div>
		<div id="div3">体育新闻：3</div>
		<div id="div4">娱乐新闻：4</div>
 </body>
</html>

我不抽烟zzm

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript——Tab切换

Document *{ margin:0px; padding:0px; } #d1{ border:1px solid red; width:500px; height:300px; } ul li{ list-style:none; float:left; width:90px; height:20px; text-align:center; bo
复制链接

扫一扫