js鼠標觸發顯示隱藏對應層

時間  2020-12-31
標籤 javascript css html java ide xml htm get 欄目 JavaScript 简体版
原文   原文鏈接

<!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=gb2312" />
<title>js鼠標觸發顯示隱藏對應層</title>
<style type="text/css">
<!--
* {
padding:0px;
margin:0px;
font:12px 宋體;
}
.main {
width:300px;
border:#FF99CC solid 1px;
}
.list_nav {
width:300px;
height:30px;
background:#FFCCFF;
list-style-type:none;
}
.list_nav li {
width:80px;
height:30px;
line-height:30px;
text-align:center;
border-right:#FF99CC solid 1px;
float:left;
}
.li_current {
background:#FFFFFF;
}
.content {
clear:both;
width:290px;
padding:5px;
}
.content ul {
width:290px;
}
.content ul li {
line-height:20px;
}
-->
</style>
</head>javascript

<body>
<script type="text/javascript">
//切換
function setTab(name,num,n){
 for(i=1;i<=n;i++){
  var menu=document.getElementById(name+i);
  var con=document.getElementById(name+"_"+"con"+i);
  menu.className=i==num?"li_current":"";
  con.style.display=i==num?"block":"none";   
 }
}
</script>
<div class="main">
  <ul class="list_nav">
    <li id="one1" class="li_current">易換網</li>
    <li id="one2" onclick="setTab('one',2,2)">老酒街</li>
  </ul>
  <div id="one_con1" class="content">
    <ul>
      <li>易換網易換網易換網ehuanw.com</li>
      <li>易換網易換網易換網ehuanw.com</li>
      <li>易換網易換網易換網ehuanw.com</li>
      <li>易換網易換網易換網ehuanw.com</li>
      <li>易換網易換網易換網ehuanw.com</li>
      <li>易換網易換網易換網ehuanw.com</li>
    </ul>
  </div>
  <div id="one_con2" class="content">
    <ul>
      <li>老酒街老酒街老酒街laojiujie.com</li>
      <li>老酒街老酒街老酒街laojiujie.com</li>
      <li>老酒街老酒街老酒街laojiujie.com</li>
      <li>老酒街老酒街老酒街laojiujie.com</li>
      <li>老酒街老酒街老酒街laojiujie.com</li>
      <li>老酒街老酒街老酒街laojiujie.com</li>
    </ul>
  </div>
</div>
<script type="text/javascript">
//切換
setTab('one',2,2)
</script>
</body>
</html>css

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程