程序博客网 > 淘宝如何做买家秀

menu

来源：互联网 发布：淘宝如何做买家秀 编辑：程序博客网 时间：2024/04/28 21:01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html class="menuHtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>menu</title>
<link href="style/style.css" rel="stylesheet" type="text/css">
<script language="javascript" src="js/menuswitch.js"></script>
</head>
<body>
 <div class="menuDiv">
   <h3>功能管理模块1</h3>   
   <ul>     
  <li><a href="#">菜单功能项1</a></li>
  <li><a href="#">菜单功能项2</a></li>
  <li><a href="#">菜单功能项3</a></li>
  <li><a href="#">菜单功能项3</a></li>
   </ul>
 </div>

 <div class="menuDiv">
   <h3>功能管理模块2</h3>
   <ul>     
  <li><a href="#">菜单功能项1</a></li>
  <li><a href="#">菜单功能项2</a></li>
  <li><a href="#">菜单功能项3</a></li>
  <li><a href="#">菜单功能项3</a></li>
   </ul>
 </div>

 <div class="menuDiv">
   <h3>功能管理模块3</h3>
   <ul>     
  <li><a href="#">菜单功能项1</a></li>
  <li><a href="#">菜单功能项2</a></li>
  <li><a href="#">菜单功能项3</a></li>
  <li><a href="#">菜单功能项3</a></li>
   </ul>
 </div>

 <div class="menuDiv">
   <h3>功能管理模块4</h3>
   <ul>     
  <li><a href="#">菜单功能项1</a></li>
  <li><a href="#">菜单功能项2</a></li>
  <li><a href="#">菜单功能项3</a></li>
  <li><a href="#">菜单功能项3</a></li>
   </ul>
 </div>
 
 <div class="menuDiv">
  <ul>
     <li><a href="#">退出管理后台</a></li>
   </ul> 
 </div> 


<script language="javascript">
 var mSwitch = new MenuSwitch("menuDiv");
 mSwitch.setDefault(0);
 mSwitch.setPrevious(true);
 mSwitch.init();
</script>
</body>
</html>

 

 

 

-----------------------------------------------------

 

 function MenuSwitch(className){  
  this._elements = [];
  this._default = -1;
  this._className = className;
  this._previous = false;
 }
 MenuSwitch.prototype.setDefault = function(id){
  this._default = Number(id);
 }
 MenuSwitch.prototype.setPrevious = function(flag){
  this._previous = Boolean(flag);
 }
 MenuSwitch.prototype.collectElementbyClass = function(){
  this._elements = [];
  var allelements = document.getElementsByTagName("div");
  for(var i=0;i<allelements.length;i++){
   var mItem = allelements[i];
   if (typeof mItem.className == "string" && mItem.className == this._className){
    var h3s = mItem.getElementsByTagName("h3");
    var uls = mItem.getElementsByTagName("ul");
    if(h3s.length == 1 && uls.length == 1){
     h3s[0].style.cursor = "hand";     
     if(this._default == this._elements.length){
      uls[0].style.display = "block"; 
     }else{
      uls[0].style.display = "none"; 
     }
     this._elements[this._elements.length] = mItem;
    }    
   }
  }
 }
 MenuSwitch.prototype.open = function(mElement){
  var uls = mElement.getElementsByTagName("ul");
  uls[0].style.display = "block";
 }
 MenuSwitch.prototype.close = function(mElement){
  var uls = mElement.getElementsByTagName("ul");
  uls[0].style.display = "none";
 }
 MenuSwitch.prototype.isOpen = function(mElement){
  var uls = mElement.getElementsByTagName("ul");  
  return uls[0].style.display == "block";
 }
 MenuSwitch.prototype.toggledisplay = function(header){
  var mItem;
  if(window.addEventListener){
   mItem = header.parentNode;
  }else{
   mItem = header.parentElement;
  }
  if(this.isOpen(mItem)){
   this.close(mItem);
  }else{
   this.open(mItem);
  }  
  if(!this._previous){
   for(var i=0;i<this._elements.length;i++){
    if(this._elements[i] != mItem){    
     var uls = this._elements[i].getElementsByTagName("ul");
     uls[0].style.display = "none";  
    }
   }
  }
 } 
 MenuSwitch.prototype.init = function(){  
  var instance = this;
  this.collectElementbyClass();
  if(this._elements.length==0){
   return;
  }
  for(var i=0;i<this._elements.length;i++){
   var h3s = this._elements[i].getElementsByTagName("h3");   
   if(window.addEventListener){
    h3s[0].addEventListener("click",function(){instance.toggledisplay(this);},false);
   }else{
    h3s[0].onclick = function(){instance.toggledisplay(this);}
   }
  }
 }

 

------------------------------------

 

 

body,td,th,div,a,h3,textarea,input{
 font-family: "宋体", "Times New Roman", "Courier New";
 font-size: 14px;
 color: #333333;
}
html{
 overflow-x:hidden;
 overflow-y:scroll;
}
.menuHtml{
 overflow-y:auto;
}
body {
 background-color: #FFFFFF;
 margin: 0px;
}
img{
 border: none;
}
form{
 margin: 0px;
 padding: 0px;
}
input{
 color: #000000;
 height: 22px;
 vertical-align: middle;
}
textarea{
 width: 80%;
 font-weight: normal;
 color: #000000;
}
a{
 text-decoration: underline;
 color: #666666;
}
a:hover{
 text-decoration: none;
}
.menuDiv{
 border: 1px solid #CCCCCC;
 background-color: #FFFFFF;
 padding: 1px;
 margin-top: 5px;
 margin-right: 5px;
 margin-left: 5px;
 margin-bottom: 0px;
}
.menuDiv h3{
 font-size: 14px;
 font-weight: bold;
 color: #FFFFFF;
 padding-top: 5px;
 padding-right: 5px;
 padding-bottom: 5px;
 padding-left: 15px;
 background-color: #999999;
 margin: 0px;
}
.menuDiv ul{
 margin: 0px;
 padding: 0px;
 list-style-type: none;
}
.menuDiv ul li{
 color: #666666;
 background-color: #EEEEEE;
 display: block;
 padding: 5px 5px 5px 15px;
 font-size: 14px;
 margin-top: 1px;
 margin-right: 0px;
 margin-bottom: 0px;
 margin-left: 0px;
 height: 16px;
}
.menuDiv ul li a{
 color: #666666;
 background-color: #F4F4F4;
 display: block;
 padding: 5px 5px 5px 15px;
 font-size: 14px;
 margin-top: -5px;
 margin-right: -5px;
 margin-bottom: -5px;
 margin-left: -15px;
 text-decoration: none;
 height: 16px;
}
.menuDiv ul li a:hover{ 
 color: #FFFFFF;
 background-color: #DDDDDD; 
}
.red{
 color:#FF0000;
}

 

 

 

-------------------

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html class="menuHtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>menu</title>
<link href="style/style.css" rel="stylesheet" type="text/css">
<script language="javascript" src="js/menuswitch.js"></script>
</head>
<body>
 <div class="menuDiv">
   <h3>功能管理模块1</h3>   
   <ul>     
  <li><a href="#">菜单功能项1</a></li>
  <li><a href="#">菜单功能项2</a></li>
  <li><a href="#">菜单功能项3</a></li>
  <li><a href="#">菜单功能项3</a></li>
   </ul>
 </div>

 <div class="menuDiv">
   <h3>功能管理模块2</h3>
   <ul>     
  <li><a href="#">菜单功能项1</a></li>
  <li><a href="#">菜单功能项2</a></li>
  <li><a href="#">菜单功能项3</a></li>
  <li><a href="#">菜单功能项3</a></li>
   </ul>
 </div>

 <div class="menuDiv">
   <h3>功能管理模块3</h3>
   <ul>     
  <li><a href="#">菜单功能项1</a></li>
  <li><a href="#">菜单功能项2</a></li>
  <li><a href="#">菜单功能项3</a></li>
  <li><a href="#">菜单功能项3</a></li>
   </ul>
 </div>

 <div class="menuDiv">
   <h3>功能管理模块4</h3>
   <ul>     
  <li><a href="#">菜单功能项1</a></li>
  <li><a href="#">菜单功能项2</a></li>
  <li><a href="#">菜单功能项3</a></li>
  <li><a href="#">菜单功能项3</a></li>
   </ul>
 </div>
 
 <div class="menuDiv">
  <ul>
     <li><a href="#">退出管理后台</a></li>
   </ul> 
 </div> 


<script language="javascript">
 var mSwitch = new MenuSwitch("menuDiv");
 mSwitch.setDefault(0);
 mSwitch.setPrevious(false);
 mSwitch.init();
</script>
</body>
</html>

淘宝如何做买家秀 淘宝如何做买家秀
原创粉丝点击
热门IT博客
nginx 静态资源nginx 静态资源
成本核算软件免费成本核算软件免费
傻瓜修图软件
怎么改变ps4网络类型
vimeo 软件下载
linux不显示行号
数据库中去重复字段
淘宝客服难做吗
开间设计 知乎
海湾报警主机8301编程
淘宝天天特价报名费用
梁朝伟和汤唯真的知乎
apache 错误日志
win7局域网网络图标
电商美工绩效考核方案
Java 获取项目发布路径
windows phone 10升级
定时开机软件 win7
javascript的全局函数
学校网络改造方案
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 人挺好 烤瓷牙挺好的 男人挺好 挺好丰胸产品 挺好保健品 做朋友挺好的 这样也挺好的 环境挺好的 挺好的意思 挺好的英语 窦伊坊效果挺好 挺好的英文 挺好的 英文 陈妍希称包子脸挺好 挺尸 挺尸是什么意思 挺立 挺立的意思 傲然挺立 挺立的近义词 挺立的反义词 挺立的意思是什么 挺立的近义词是什么 傲然挺立的意思 小嘴包裹着他挺立的分身王爷 胸口两朵蓓蕾骄傲地挺立着gif 挽 挽歌 挽尊 挽组词 挽联大全 挽拼音 魔道祖师之挽吟 夏挽歌作品 向挽歌傅承勋 深圳出租屋挽妻故事续 挽联怎么写 挽的拼音 挽回明月珰 挽回吧 挽回的图片

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里