jhddxp 发表于 2013-2-7 17:13:02

js+css控制鼠标移过显示隐藏菜单

<!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><title>head</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta http-equiv="Content-Language" content="zh-CN" /><style>body {      text-align: center;      background: #FFF;      font: 12px Tahoma, sans-serif;      color: #000;}img {      border: 0;}ul,li {      list-style:none;}* {      margin: 0;      padding: 0;}.clear {      clear: both;      margin: 0 auto;      display: block;      font: 0/0 sans-serif;      height: 3px;}.head {      margin: 0 auto;      width: 760px;}.headl {      width: 10px;      float: left;}.headr {      width: 750px;      float: right;      padding: 8px 0 0 0;}.headt {      padding-top: 8px;      font-size: 14px;}.head li {      display: inline;}.head li a {      background: #E9F2FF;      border: 1px solid #CCC;      padding: 2px 15px;}.head li a:hover {      background: #B3D3FF;      text-decoration: none;      color: #D30102;}</style></head><body><script type="text/javascript">function fetch_object(idname){ var my_obj = document.getElementById(idname); return my_obj;}function toggle_nav(obj){ for (i = 1; i<= 9; i++ ) {var sub_nav = fetch_object("sub_nav_" + i);var sub_nav_index = fetch_object("sub_nav_0");sub_nav_index.style.display = "none";if (obj == i){   sub_nav.style.display = "block";}else{   sub_nav.style.display = "none";} }}</script><div class="head">      <div class="headl"><a href="/"></a></div>      <div class="headr">                <ul>                <li ><a href="/">大栏目1</a></li>                <li ><a href="/">大栏目2</a></li>                <li ><a href="/">大栏目3</a></li>                <li ><a href="/">大栏目4</a></li>                <li ><a href="/">大栏目5</a></li>                <li ><a href="/">大栏目6</a></li>                <li ><a href="/">大栏目7</a></li>                <li ><a href="/">大栏目8</a></li>                <li ><a href="/">大栏目9</a></li>                </ul>                <div class="clear"></div>                <div id="sub_nav_0" class="headt" style="display:block">欢迎语</div>               <div id="sub_nav_1" class="headt" style="display:none">                <a href="/">小栏目1</a> | <a href="/">小栏目</a> | <a href="/">小栏目</a> | <a href="/">小栏目</a>                </div>                <div id="sub_nav_2" class="headt" style="display:none">                <a href="/">小栏目2</a> | <a href="/">小栏目</a> | <a href="/">小栏目</a> | <a href="/">小栏目</a>                </div>                <div id="sub_nav_3" class="headt" style="display:none">                <a href="/">小栏目3</a> | <a href="/">小栏目</a> | <a href="/">小栏目</a> | <a href="/">小栏目</a>                </div>                <div id="sub_nav_4" class="headt" style="display:none">                <a href="/">小栏目4</a> | <a href="/">小栏目</a> | <a href="/">小栏目</a> | <a href="/">小栏目</a>                </div>                <div id="sub_nav_5" class="headt" style="display:none">                <a href="/">小栏目5</a> | <a href="/">小栏目</a> | <a href="/">小栏目</a> | <a href="/">小栏目</a>                </div>                <div id="sub_nav_6" class="headt" style="display:none">                <a href="/">小栏目6</a> | <a href="/">小栏目</a> | <a href="/">小栏目</a> | <a href="/">小栏目</a>                </div>                <div id="sub_nav_7" class="headt" style="display:none">                <a href="/">小栏目7</a> | <a href="/">小栏目</a> | <a href="/">小栏目</a> | <a href="/">小栏目</a>                </div>                <div id="sub_nav_8" class="headt" style="display:none">                <a href="/">小栏目8</a> | <a href="/">小栏目</a> | <a href="/">小栏目</a> | <a href="/">小栏目</a>                </div>                <div id="sub_nav_9" class="headt" style="display:none">                <a href="/">小栏目9</a> | <a href="/">小栏目</a> | <a href="/">小栏目</a> | <a href="/">小栏目</a>                </div>      </div></div><div class="clear"></div></body></html>

对于少量的div只需每次循环判断
页: [1]
查看完整版本: js+css控制鼠标移过显示隐藏菜单