html小测试3

最新推荐文章于 2024-07-18 18:41:00 发布

YanceyFancey

最新推荐文章于 2024-07-18 18:41:00 发布

阅读量122

点赞数

文章标签： html

本文链接：https://blog.csdn.net/weixin_44081470/article/details/108200647

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="home3.css" rel="stylesheet" type="text/css" />
<script type="text/javascript"> 
function change_div(id){ 
  if (id == 'sy' ) 
  { 
     document.getElementById("sy").style.display = 'block' ; 
     document.getElementById("xxlt").style.display = 'none' ;
     document.getElementById("xywd").style.display = 'none' ; 
     document.getElementById("itqz").style.display = 'none' ; 
     document.getElementById("sskt").style.display = 'none' ; 
     document.getElementById("khdxz").style.display = 'none' ; 
     document.getElementById("bzzx").style.display = 'none' ;   
  } 
  else if(id == 'xxlt')
  { 
	     document.getElementById("sy").style.display = 'none' ; 
	     document.getElementById("xxlt").style.display = 'block' ;
	     document.getElementById("xywd").style.display = 'none' ; 
	     document.getElementById("itqz").style.display = 'none' ; 
	     document.getElementById("sskt").style.display = 'none' ; 
	     document.getElementById("khdxz").style.display = 'none' ; 
	     document.getElementById("bzzx").style.display = 'none' ; 
  } 
  else if(id == 'xywd')
  { 
	     document.getElementById("sy").style.display = 'none' ; 
	     document.getElementById("xxlt").style.display = 'none' ;
	     document.getElementById("xywd").style.display = 'block' ; 
	     document.getElementById("itqz").style.display = 'none' ; 
	     document.getElementById("sskt").style.display = 'none' ; 
	     document.getElementById("khdxz").style.display = 'none' ; 
	     document.getElementById("bzzx").style.display = 'none' ; 
  } 
  else if(id == 'itqz')
  { 
	     document.getElementById("sy").style.display = 'none' ; 
	     document.getElementById("xxlt").style.display = 'none' ;
	     document.getElementById("xywd").style.display = 'none' ; 
	     document.getElementById("itqz").style.display = 'block' ; 
	     document.getElementById("sskt").style.display = 'none' ; 
	     document.getElementById("khdxz").style.display = 'none' ; 
	     document.getElementById("bzzx").style.display = 'none' ; 
  } 
  else if(id == 'sskt')
  { 
	     document.getElementById("sy").style.display = 'none' ; 
	     document.getElementById("xxlt").style.display = 'none' ;
	     document.getElementById("xywd").style.display = 'none' ; 
	     document.getElementById("itqz").style.display = 'none' ; 
	     document.getElementById("sskt").style.display = 'block' ; 
	     document.getElementById("khdxz").style.display = 'none' ; 
	     document.getElementById("bzzx").style.display = 'none' ; 
  } 
  else if(id == 'khdxz')
  { 
	     document.getElementById("sy").style.display = 'none' ; 
	     document.getElementById("xxlt").style.display = 'none' ;
	     document.getElementById("xywd").style.display = 'none' ; 
	     document.getElementById("itqz").style.display = 'none' ; 
	     document.getElementById("sskt").style.display = 'none' ; 
	     document.getElementById("khdxz").style.display = 'block' ; 
	     document.getElementById("bzzx").style.display = 'none' ; 
  } else{
	
		     document.getElementById("sy").style.display = 'none' ; 
		     document.getElementById("xxlt").style.display = 'none' ;
		     document.getElementById("xywd").style.display = 'none' ; 
		     document.getElementById("itqz").style.display = 'none' ; 
		     document.getElementById("sskt").style.display = 'none' ; 
		     document.getElementById("khdxz").style.display = 'none' ; 
		     document.getElementById("bzzx").style.display = 'block' ; 
	  
  }

  
} 
</script> 
<style type="text/css"> 
  #gsgs { 
     display:none; 
          } 
</style> 
</head>
<body id="p1">
<div >
<ul><li>首页</li>
<li>学习论坛</li>
<li>学员问答</li>
<li>IT圈子</li>
<li>实时课堂</li>
<li>客户端下载</li>
<li>帮助中心</li></ul>
</div><br>

<table>
<td>
<ul><li ><a href="#"οnclick="change_div('sy')"> 首页</a></li>
<li><a href="#"οnclick="change_div('xxlt')">学习论坛</a></li>
<li ><a href="#"οnclick="change_div('xywd')">学员问答</a></li>
<li><a href="#"οnclick="change_div('itqz')">IT圈子</a></li>
<li><a href="#"οnclick="change_div('sskt')">实时课堂</a></li>
<li><a href="#"οnclick="change_div('khdxz')">客户端下载</a></li>
<li><a href="#"οnclick="change_div('bzzx')">帮助中心</a></li></ul>
</td>
<td>
<a id="sy">
<h2>首页</h2>
</a>
<a id="xxlt">
<h2>学习论坛</h2>
</a>
<a id="xywd">
<h2>学员问答</h2>
</a>
<a id="itqz">
<h2>IT圈子</h2>
</a>
<a id="sskt">
<h2>实时课堂</h2>
</a>
<a id="khdxz">
<h2>客户端下载</h2>
</a>
<a id="bzzx">
<h2>帮助中心</h2>
</a>
</td>
</table>
</body>
</html>

@CHARSET "UTF-8";
body div{
background:#383838;
width:800px;
height:32px;

}
.p1{
list-style-type:none	
}
div ul li{
width:90px;
margin:10px 5px 10px 5px;
float: left;
color:white;
font-size:13px;
font-weight:bold;
}

YanceyFancey

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
html小测试3

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><link href="home3.css" rel="stylesheet" type="text/css" /><script type="text/javascript"> function change_div(id){ if
复制链接

扫一扫