现在的位置: 首页 > 综合 > 正文

DIV伸缩菜单

2013年03月19日 ⁄ 综合 ⁄ 共 3565字 ⁄ 字号 评论关闭

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> DIV伸缩菜单 </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type="text/css">
<!--
.te1{ width:195px !important; width /**/:255px; float:left; padding:0 18px 0 42px;}
.te2{ width:195px; float:left; padding-top:8px;}
.te2 ul{ margin:0; padding:0px;}
.te2 li{ width:185px !important; width /**/:195px; float:left; border-bottom:1px solid #EBEBEB; line-height:28px; padding-left:10px; overflow:hidden; display:block; cursor:pointer;}

.te3{ background: url(images/in_17.gif) no-repeat 10px 6px; text-indent:15px; font-size:14px; font-weight:bold; color:#3D63BE; }
.te3 a{ color:#3D63BE; font-size:14px; font-weight:bold; text-decoration:none;}
.te3 a:hover{ color:#3D63BE;}
.te33{ background: url(images/in_16.gif) no-repeat 10px 10px; text-indent:15px; font-size:14px; font-weight:bold; color:#3D63BE; }
.te33 a{ color:#3D63BE; font-size:14px; font-weight:bold; text-decoration:none;}
.te33 a:hover{ color:#3D63BE; }

.te4{ width:185px !important; width /**/:195px; float:left; clear:both; color:#333; line-height:28px; padding-left:10px;}
.te4 a{ color:#333; text-decoration:none; font-size:12px; font-weight:normal;}
.te4 a:hover{ color:#333; text-decoration:underline;}
.none{ display:none;}
-->
</style>
<script type="text/javascript">

function showdiv(divnum,divbefor){
        for(i=1;i<=divnum;i++){
    if(i==divbefor){
      document.getElementById("Nav_"+i).className = "te33"
      document.getElementById("Content_"+i).className ="block";
    }else{
      document.getElementById("Nav_"+i).className = "te3"
      document.getElementById("Content_"+i).className ="none";
    }
        }
}
</script>
</HEAD>

<BODY>
<div class="te1">
        <div class="te2">
          <ul>
            <li class="te33" id="Nav_1" onclick="javascript:showdiv('5','1')">项目介绍</li>
            <div class="block" id="Content_1">
              <div class="te4"><a href="#">项目优势</a></div>
              <div class="te4"><a href="#">申请条件</a></div>
              <div class="te4"><a href="#">办理程序</a></div>
              <div class="te4"><a href="#">服务流程</a></div>
            </div>
            <li class="te3" id="Nav_2" onclick="javascript:showdiv('5','2')">德国政策</li>
            <div class="none" id="Content_2">
              <div class="te4"><a href="#">移民政策</a></div>
              <div class="te4"><a href="#">福利政策</a></div>
              <div class="te4"><a href="#">投资政策</a></div>
              <div class="te4"><a href="#">税务政策</a></div>
             </div>
            <li class="te3" id="Nav_3" onclick="javascript:showdiv('5','3')">德国纵览</li>
             <div class="none" id="Content_3">
              <div class="te4"><a href="#">地理人文</a></div>
              <div class="te4"><a href="#">经济概况</a></div>
              <div class="te4"><a href="#">重点行业</a></div>
              <div class="te4"><a href="#">数字德国</a></div>
             </div>
            <li class="te3" id="Nav_4" onclick="javascript:showdiv('5','4')">实用信息</li>
             <div class="none" id="Content_4">
              <div class="te4"><a href="#">社会保障制度</a></div>
              <div class="te4"><a href="#">德国教育体系</a></div>
              <div class="te4"><a href="#">限制性行业</a></div>
              <div class="te4"><a href="#">公司设立形式</a></div>
              <div class="te4"><a href="#">在德国生活</a></div>
            </div>
            <li class="te3" id="Nav_5" onclick="javascript:showdiv('5','5')">城市介绍</li>
             <div class="none" id="Content_5">
              <div class="te4"><a href="#">北威州</a></div>
              <div class="te4"><a href="#">柏林</a></div>
              <div class="te4"><a href="#">科隆</a></div>
            </div>
          </ul>
        </div>
    </div>
</BODY>
</HTML>

源码

抱歉!评论已关闭.