DIV+CSS鼠标经过内容交换显示

发布时间:2008年06月30日      浏览次数:1610 次
<!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=utf-8" />
<script language="javascript">
      function select_bg(str){
            for (i=1;i<=5;i++){
                  var id="t_"+i;
                  if ( document.getElementById(id) && document.getElementById(id).className !="select_off" && str != id ) {
                        document.getElementById(id).className="select_off";
                        document.getElementById(id+"_content").style.display="none";
                  }
            }
            if (document.getElementById(str).className !="select_on") {
                  document.getElementById(str).className="select_on";
                  document.getElementById(str+"_content").style.display="";
            }
      }
</script>
<style>
<!--
body,div,a,p{ font-size:12px; font-family:Arial, Helvetica, sans-serif;}
#div_main{ clear:both; width:550px; margin-top:5px; padding:0px;}
      #div_title{ clear:both; width:550px; height:33px; margin:0; padding:0px;}
            #div_title ul{ clear:both; list-style:none; margin:0; padding:0px;}
            #div_title ul li{ list-style:none; float:left; margin-right:5px; padding:0px; text-align:center; cursor:hand; width:90px; height:33px; line-height:33px; }
/*
            如果使用背景图片,则用这三行,然后注释下面三行
            .select_on{ background:url(select_bg_on.gif) left bottom no-repeat; font-weight:bold;}
            .select_off{ background:url(select_bg_off.gif) left bottom no-repeat; }
      #div_line{ list-style:none; clear:both; margin:0; padding:0px; background:url(line.gif) top left repeat-x; width:100%; height:5px; line-height:0px;}      
*/
            .select_on{ background-color:#ccc; font-weight:bold;}
            .select_off{ background-color:#efefef; }
      #div_line{ list-style:none; clear:both; margin:0; padding:0px; background-color:#ccc; width:100%; height:5px; line-height:0px;}      
      #div_content{ clear:both; border-top:0px #CCC solid; border-right:1px #CCC solid; border-bottom:1px #CCC solid; border-left:1px #CCC solid; width:548px; height:100px; line-height:100px; margin:0; padding:2px 0px; text-align:center;}
            #div_content ul{ clear:both; list-style:none; margin:0 auto; padding:0px; width:544px; height:24px; display:block;}
            #div_content ul li{ list-style:none; float:left; margin:0; padding:0px 5px; width:126px; height:24px; line-height:24px; text-align:left;}
            .li_bg_1{ background-color:#FFDFDB;}
            .li_bg_2{ background-color:#FFF;}
            .li_bg_3{ background-color:#FFBECE;}
            .li_bg_4{ background-color:#ECECEC;}
            #t_1_content{ margin:0; padding:0px; clear:both;}
            #t_2_content{ margin:0; padding:0px; clear:both;}
            #t_3_content{ margin:0; padding:0px; clear:both;}
            #t_4_content{ margin:0; padding:0px; clear:both;}
            #t_5_content{ margin:0; padding:0px; clear:both;}
-->
</style>
</head>
<body>
<div id="div_main">
<div id="div_title">
<ul>
<li id="t_1" class="select_on" onmouseover="select_bg('t_1');">Menu1</li>
<li id="t_2" class="select_off" onmouseover="select_bg('t_2');">Menu2</li>
<li id="t_3" class="select_off" onmouseover="select_bg('t_3');">Menu3</li>
<li id="t_4" class="select_off" onmouseover="select_bg('t_4');">Menu4</li>
<li id="t_5" class="select_off" onmouseover="select_bg('t_5');">Menu5</li>
</ul>
</div>
<div id="div_line"><span></span></div>
<div id="div_content">
<div id="t_1_content" style="display:;"> 1 </div>
<div id="t_2_content" style="display:none;"> 2 </div>
<div id="t_3_content" style="display:none;"> 3 </div>
<div id="t_4_content" style="display:none;"> 4 </div>
<div id="t_5_content" style="display:none;"> 5 </div>
</div>
</div>
</body>
</html>
文章来源:桂林唯创网络
免责声明:本站相关技术文章信息部分来自网络,目的主要是传播更多信息,如果您认为本站的某些信息侵犯了您的版权,请与我们联系,我们会即时妥善的处理,谢谢合作!