div+css+js 树形菜单

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

代码:
<div class="main_2">
   <div class="m_left">
     <ul class="nav">
        <li id="bottom_none"><a href="#"  onClick="DoMenu('ChildMenu1')">税务登记</a>
          <ul id="ChildMenu1" class="expanded">
            <li id="border_top"><a href="biangengdengji.html">变更登记</a></li>
            <li><a href="shelidengji.html">设立登记</a></li>
            <li><a href="#">复业登记</a></li>
            <li><a href="#">扣缴义务人登记</a></li>
            <li><a href="#">停业登记</a></li>
            <li><a href="#">外埠经营登记</a></li>
          </ul>
        </li>
        <li id="bottom_none"><a href="#" onClick="DoMenu('ChildMenu2')">认定管理</a>
          <ul id="ChildMenu2" class="collapsed">
            <li id="border_top"><a href="#">税务资格认证</a></li>
            <li><a href="#">税务资格认证</a></li>
            <li><a href="#">税务资格认证</a></li>
            <li><a href="#">税务资格认证</a></li>
            <li><a href="#">税务资格认证</a></li>
            <li><a href="#">税务资格认证</a></li>
            <li><a href="#">税务资格认证</a></li>

          </ul>
        </li>
        <li id="bottom_none"><a href="#" onClick="DoMenu('ChildMenu3')">防伪税控</a>
          <ul id="ChildMenu3" class="collapsed">
            <li id="border_top"><a href="fangzhishuishou.html">防伪税控</a></li>
          </ul>
        </li>
        <li id="bottom_none"><a href="#" onClick="DoMenu('ChildMenu6')">发票管理</a>
          <ul id="ChildMenu6" class="collapsed">
            <li id="border_top"><a href="#">发票拆本使用审批</a></li>
            <li><a href="#">发票拆本使用审批(行政许可)</a></li>
            <li><a href="#">发票拆本使用审批</a></li>
            <li><a href="#">发票拆本使用审批</a></li>
            <li><a href="#">发票拆本使用审批</a></li>
            <li><a href="#">发票拆本使用审批</a></li>
          </ul>
        </li>
       
        <li id="bottom_none"><a href="#" onClick="DoMenu('ChildMenu4')">账簿管理</a>
          <ul id="ChildMenu4" class="collapsed">
            <li id="border_top"><a href="#">记账核算</a></li>
            <li><a href="#">记账核算</a></li>
            <li><a href="#">记账核算</a></li>
            <li><a href="#">记账核算</a></li>
          </ul>
        </li>
        <li id="bottom_none"><a href="#" onClick="DoMenu('ChildMenu5')">纳税申报</a>
          <ul id="ChildMenu5" class="collapsed">
            <li id="border_top"><a href="#">出口货物退税申报</a></li>
            <li><a href="#">出口货物退税申报</a></li>
            <li><a href="#">出口货物退税申报</a></li>
            <li><a href="#">出口货物退税申报</a></li>
            <li><a href="#">出口货物退税申报</a></li>
            <li><a href="#">出口货物退税申报</a></li>
          </ul>
        </li>
        <li id="bottom_none"><a href="#" onClick="DoMenu('ChildMenu7')">税款缴纳</a>
          <ul id="ChildMenu7" class="collapsed">
            <li id="border_top"><a href="#">延期缴纳税款</a></li>
            <li><a href="#">延期缴纳税款</a></li>
            <li><a href="#">延期缴纳税款</a></li>
          </ul>
        </li>
        <li id="bottom_none"><a href="#" onClick="DoMenu('ChildMenu8')">证明管理</a>
          <ul id="ChildMenu8" class="collapsed">
            <li id="border_top"><a href="#">补办出口货物报关单证明</a></li>
            <li><a href="#">补办出口货物报关单证明</a></li>
            <li><a href="#">补办出口货物报关单证明</a></li>
            <li><a href="#">补办出口货物报关单证明</a></li>
            <li><a href="#">补办出口货物报关单证明</a></li>
            <li><a href="#">补办出口货物报关单证明</a></li>
          </ul>
        </li>
        <li id="bottom_none"><a href="#" onClick="DoMenu('ChildMenu9')">特殊税种</a>
          <ul id="ChildMenu9" class="collapsed">
            <li id="border_top"><a href="#">车辆购置税</a></li>
          </ul>
        </li>
        <li id="bottom_none"><a href="#" onClick="DoMenu('ChildMenu10')">纳税检查</a>
          <ul id="ChildMenu10" class="collapsed">
            <li id="border_top"><a href="#">税务稽查</a></li>
            <li><a href="#">税务违法违章的处罚</a></li>
            <li><a href="#">税务机关行政执法的依据</a></li>
            <li><a href="#">税务行政处罚听证</a></li>
          </ul>
        </li>
        <li id="bottom_none"><a href="#" onClick="DoMenu('ChildMenu11')">行政许可</a>
          <ul id="ChildMenu11" class="collapsed">
            <li id="border_top"><a href="#">企业衔头发票印制审批</a></li>
            <li><a href="#">企业衔头发票印制审批</a></li>
            <li><a href="#">企业衔头发票印制审批</a></li>
            <li><a href="#">企业衔头发票印制审批</a></li>
          </ul>
        </li>
        <li id="bottom_none"><a href="#" onClick="DoMenu('ChildMenu12')">税收优惠</a>
          <ul id="ChildMenu12" class="collapsed">
            <li id="border_top"><a href="#">车辆购置税减免税</a></li>
            <li><a href="#">车辆购置税减免税</a></li>
            <li><a href="#">车辆购置税减免税</a></li>
            <li><a href="#">车辆购置税减免税</a></li>
            <li><a href="#">车辆购置税减免税</a></li>
            <li><a href="#">车辆购置税减免税</a></li>
          </ul>
        </li>
        <li id="bottom_none"><a href="#" onClick="DoMenu('ChildMenu13')">行政救济</a>
          <ul id="ChildMenu13" class="collapsed">
            <li id="border_top"><a href="#">税务行政赔偿业务流程</a></li>
            <li><a href="#">税务行政赔偿业务流程</a></li>
            <li><a href="#">税务行政赔偿业务流程</a></li>
            <li><a href="#">税务行政赔偿业务流程</a></li>
          </ul>
        </li>
        <li id="bottom_none"><a href="#" onClick="DoMenu('ChildMenu14')">税务代理</a>
          <ul id="ChildMenu14" class="collapsed">
            <li id="border_top"><a href="#">代理的申请</a></li>
            <li><a href="#">代理的申请</a></li>
            <li><a href="#">代理的申请</a></li>
            <li><a href="#">代理的申请</a></li>
            <li><a href="#">代理的申请</a></li>
          </ul>
        </li>
        <li id="bottom_none"><a href="#" onClick="DoMenu('ChildMenu15')">担保担保</a>
          <ul id="ChildMenu15" class="collapsed">
            <li id="border_top"><a href="#">担保</a></li>
          </ul>
        </li>
       </ul>
      </div>
    
     <div class="m_right"></div>
    </div>
CSS样式:
body{margin:0px;padding:0px;color:#585858;font-size:12px;font-family: "宋体";line-height:20px;}
.clear{clear:both;}
ul{margin: 0;padding: 0;list-style-type: none;}
.main_2{width:805px; float:right;}
.m_left{width:190px; float:left;}
.m_right{ width:608px; float:right;}


            .nav {
             width:190px;
             list-style-type: none;
             text-align:left;
             overflow:hidden;
               
            }
           
            .nav a {
             width: 168px;
             display: block;
             padding-left:10px;
             
            }
            .nav li {
                border-top:#ebebeb 1px solid;
                border-bottom:#ebebeb 1px solid;
                float:left;
                line-height:28px;
                background-color: #f5f5f5;font-weight:bold;
                            }
            .nav li a{
                background-image: url(../images/jiantou.gif);
                background-repeat: no-repeat;
               
                background-position: 10px 12px;
                padding-left:20px;
                font-size: 14px;
                color:#585858;
                text-decoration: none;   
            }
            .nav li a:hover,.nav li a.hover{
                color:#4c657e;
                background-color: #f5f5f5;
               
             }
           
            .nav li ul {
             list-style:none;
             text-align:left;
             
            }
            .nav li ul li{
                border:none;
                background-color: #fff;
                 padding-left:3px;
                background-image: url(../images/dian.gif);
                background-repeat: no-repeat;
                background-position: 15px 10px; font-weight:normal;
            }
            .nav li ul li a{
                background-image: none;
                font-size:12px;
            }
            .nav li ul li a:hover,.nav li ul li a.hover {
                color:#4c657e;
                text-decoration:none;
                font-weight:normal;
                background:none;
                background-image: none;
            }
            .nav ul.collapsed {
             display: none;
            }
            #bottom_none{
            border-bottom: none;
            }
            #border_top{
            border-top:  solid 1px #ebebeb;
            }
js:
var LastLeftID = "";
function menuFix() {
 var obj = document.getElementByIdx_x("nav").getElementsByTagName_r("li");
 
 for (var i=0; i<obj.length; i++) {
  obj[i].οnmοuseοver=function() {
   this.className+=(this.className.length>0? " ": "") + "sfhover";
  }
  obj[i].onMouseDown=function() {
   this.className+=(this.className.length>0? " ": "") + "sfhover";
  }
  obj[i].onMouseUp=function() {
   this.className+=(this.className.length>0? " ": "") + "sfhover";
  }
  obj[i].οnmοuseοut=function() {
   this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), "");
  }
 }
}
function DoMenu(emid)
{
 var obj = document.getElementByIdx_x(emid);
 obj.className = (obj.className.toLowerCase() == "expanded"?"collapsed":"expanded");
 if((LastLeftID!="")&&(emid!=LastLeftID)) //关闭上一个Menu
 {
  document.getElementByIdx_x(LastLeftID).className = "collapsed";
 }
 LastLeftID = emid;
}
function GetMenuID()
{
 var MenuID="";
 var _paramStr = new String(window.location.href);
 var _sharpPos = _paramStr.indexOf("#");
 
 if (_sharpPos >= 0 && _sharpPos < _paramStr.length - 1)
 {
  _paramStr = _paramStr.substring(_sharpPos + 1, _paramStr.length);
 }
 else
 {
  _paramStr = "";
 }
 
 if (_paramStr.length > 0)
 {
  var _paramArr = _paramStr.split("&");
  if (_paramArr.length>0)
  {
   var _paramKeyVal = _paramArr[0].split("=");
   if (_paramKeyVal.length>0)
   {
    MenuID = _paramKeyVal[1];
   }
  }
 
 }
 
 if(MenuID!="")
 {
  DoMenu(MenuID)
 }
}
GetMenuID(); //*这两个function的顺序要注意一下,不然在Firefox里GetMenuID()不起效果

menuFix();


本文转载:http://www.niwozhi.com/wenku_detail/264_34826.html

转载于:https://my.oschina.net/u/1161556/blog/141990

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/293317.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

马化腾最崇拜的作家吴晓波《历代经济变革得失》读书笔记

吴晓波先生&#xff0c;是马化腾最崇拜的作家&#xff0c;腾讯的朋友说&#xff0c;马化腾逢人便推荐吴晓波的写的书《历代经济变革得失》&#xff0c;并亲自指示腾讯视频免费推广这个视频讲座。这本书我通读了两遍&#xff0c;总结了如下的笔记&#xff1a;

SQL:认识数据库约束

讲了关于数据库的很多内容&#xff0c;也讲了很多约束&#xff0c;对唯一和主键、核查和规则、外键约束很感兴趣。 一、唯一和主键&#xff08;实体完整性&#xff09;区别&#xff1a;数量&#xff1a;一张表只可以有一个主键约束&#xff0c;却可以有多个唯一约束。是否空值&…

Android之使用IDA Pro静态分析so文件

安卓应用程序的开发语言是java&#xff0c;但是由于java层的代码很容易被反编译&#xff0c;而反编译c/c程序的难度比较大&#xff0c;所以现在很多安卓应用程序的核心部分都使用NDK进行开发。关于NDK的开发知识点&#xff0c;请看这篇博客&#xff1a;Android之NDK开发。 关于…

.NET 6 中的 Logging Source Generator

.NET 6 中的 Logging Source GeneratorIntroLogging source generator 是 .NET 6 引入的一个新功能&#xff0c;借助 Source Generator 来实现&#xff0c;因为要用到 C# 9 中的分部方法(partial method)&#xff0c;C# 语言需要使用 9 及以上版本&#xff0c;具有更好的性能以…

电脑内部录音教程Virtual Audio Cable使用教程

1:下载Virtual Audio Cable2&#xff1a;安装Virtual Audio Cable3&#xff1a;设置&#xff08;注意这里line1不要开启监听其他设备&#xff09;3&#xff1a;打开声音传输通道软件C:\Program Files\Virtual Audio Cable\audiorepeater.exe点击start启动&#xff0c;最小化。4…

战队口号霸气押韵8字_高考励志班级口号霸气押韵大全

【导语】高考没有什么可怕的&#xff0c;一定要保证心态好&#xff0c;就可能考出比平时更好的成绩。下面是无忧考网分享的高考励志班级口号霸气押韵大全。欢迎阅读参考&#xff01;【篇一】高考励志班级口号霸气押韵1.激情澎湃&#xff0c;高考不败&#xff0c;斗志昂扬&#…

别说理科男不懂撩妹,这个老司机一生只爱两样:物理和18岁的少女

全世界只有3.14 % 的人关注了爆炸吧知识相信在很多人的眼中&#xff0c;科研人员都是正经和严肃的代名词。成就大&#xff0c;光芒大&#xff0c;仿佛天生圣人。但是超模君在和大家讲了这么多科学家的故事后&#xff0c;发现还是那句俗话说得好&#xff1a;科研是科研&#xff…

一条nginx命令引发的对于容器的思考

去年的时候写了一篇原创《前后端分离&#xff0c;如何在前端项目中动态插入后端API基地址&#xff1f;&#xff08;in docker&#xff09;》&#xff0c; 我自认为这篇生产实践是对大前端、 容器化、CI/CD的得意之作。对于前后端分离的web项目&#xff0c;在容器启动的瞬间&…

部门树形结构,使用Treeview控件显示部门

部门树形结构。设计张部门表用于存储部门编码、名称、上级部门id&#xff0c;使用Treeview控件显示部门树&#xff0c;并实现部门增删改、移动、折叠等功能。特别提示&#xff0c;部门有层级关系&#xff0c;可用donetbar的adtree控件 代码如下 1 using System;2 using System.…

移动端 登陆 模板 html_聚会邀请函请柬模板 免费设计制作生成

制作邀请函 请关注我们聚会并非你的个人发布会和生活成果展&#xff0c;而在于描绘经历了风雨沧桑的那道彩虹&#xff0c;世事变化&#xff0c;聚会不是为了显示某人身居高位&#xff0c;也不是衣锦还乡或日过斗金、大富大贵的炫耀&#xff0c;重温那充满梦想的花样年华&#x…

他们是你学生时期的噩梦,但现在你可以把他们按在墙上摩擦了……

全世界只有3.14 % 的人关注了爆炸吧知识用艺术家的眼光去看科学&#xff0c;用人生的角度去看艺术。——尼采看过日剧的朋友都不会陌生下面的场景&#xff1a;日本主妇会将存放在冰箱中的东西列出清单&#xff0c;然后用磁贴将之贴在冰箱门上。每次购物或煮食后&#xff0c;她们…

推荐系统相关算法(1):SVD

假如要预测Zero君对一部电影M的评分&#xff0c;而手上只有Zero君对若干部电影的评分和风炎君对若干部电影的评分&#xff08;包含M的评分&#xff09;。那么能预测出Zero君对M的评分吗&#xff1f;答案显然是能。最简单的方法就是直接将预测分定为平均分。不过这时的准确度就难…

vSphere日志分析器(vCenter Log Insight)安装、配置

很久没更新博客&#xff0c;最近在网上看到了1.0版本的vSphere分析器可下载并可测试&#xff0c;测试完后发觉以前人肉全手动分析log&#xff0c;看得眼前飘白雪的情况不会出现了。这里和大家分享一下。1 关于vCenter Log Insight当ESX/ESXi主机发生故障&#xff0c;很多用户或…

android开发将h5转换成pdf_一键将PDF转换成PPT,秒懂!

PDF因能良好的兼容各操作系统和软件版本的差异性&#xff0c;使得PDF文档在查阅播放的时候不影响排版变化&#xff0c;很多时候&#xff0c;我们因为工作上的需要&#xff0c;经常需要再次将PDF转换成PPT&#xff0c;那么怎样将PDF转换成PPT呢&#xff1f;需要下载专业的转换工…

MongoDB 权限认证

MongoDB已经使用很长一段时间了&#xff0c;基于MongoDB的数据存储也一直没有使用到权限访问&#xff08;MongoDB默认设置为无权限访问限制&#xff09;&#xff0c;因为考虑到数据安全的原因特地花了一点时间研究了一下&#xff0c;网上搜出来的解决方法大都是3.0以下的版本的…

推荐系统相关算法(2):k-nearest neighbor

1. kNN 1.1 基本的kNN模型 kNN(k-nearest neighbor)的思想简单来说就是&#xff0c;要评价一个未知的东西U&#xff0c;只需找k个与U相似的已知的东西&#xff0c;并通过k个已知的&#xff0c;对U进行评价。假如要预测风炎君对一部电影M的评分&#xff0c;根据kNN的思想&#…

看了《OCP/OCA认证考试指南全册:Oracle Database 11g(1Z0-051,...

为什么80%的码农都做不了架构师&#xff1f;>>> 一直对考试用书没好感&#xff0c;觉得里边的内容都刻板不实用。在查找Oracle书籍时&#xff0c;无意中看到有人在豆瓣里说&#xff0c;如果给他一次重新的机会&#xff0c;他只看OCP 052、053&#xff0c;Oracle编程…

.net 集合分成几个等数量集合_巧用数学游戏,帮助幼儿轻松掌握12种数量关系!...

网校在手 轻松教研线上学习灵活高效海量资源轻松获取一键搞定园本教研感知数量关系是幼儿园数学教育的核心内容&#xff0c;是发展幼儿数学思维的重要因素。那么&#xff0c;孩子在幼儿园阶段需要了解哪些数量关系呢&#xff1f;幼儿园有哪些数学教育内容包含着数量关系呢&…