符合网页标准的选项卡效果

<!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" />
<title>符合网页标准的选项卡效果-www.18space.net</title>
<SCRIPT type=text/javascript>
<!--
//www.18space.net
function nTabs(thisObj,Num){
  if(thisObj.className == "m_active")return;
  var tabObj = thisObj.parentNode.id;
  var tabList = document.getElementById(tabObj).getElementsByTagName("li");
  for(i=0; i <tabList.length; i++)
  {
    if (i == Num)
    {
      thisObj.className = "m_active"; 
        document.getElementById(tabObj+"_Content"+i).style.display = "block";
    }else{
      tabList[i].className = "m_normal"; 
      document.getElementById(tabObj+"_Content"+i).style.display = "none";
    }
  } 
}
//www.18space.net
-->
</SCRIPT>
<style type="text/css">
<!--
/*www.18space.net*/
.index_left_lm{
padding:5px;
border: 1px solid #CCCCCC;}
.mouse_lm_title{}
.mouse_lm_title ul{
margin:0px;
padding:0px;}
.mouse_lm_title ul li{
margin:0px;
padding:0px;
list-style:none;
float:left;
width:100px;
text-align:center;}
.mouse_lm_content{
background: #FF9933;}
.mouse_lm_content ul{
margin:0px;
padding:0px;
}
mouse_lm_content ul li{
margin:0px;
padding:0px;
list-style:none;}
.m_active{
background: #FF9933;}
-->
</style>
</head>
<body >
<div class="index_left_lm">       
    <div class="mouse_lm_title">
        <!--鼠标栏目标题开始-->
        <ul id="menu_31">
            <li class="m_active" onmouseover="nTabs(this,0)";>
            栏目1
            </li>
            <li class="m_normal" onmouseover="nTabs(this,1)";>
            栏目2
            </li>
            <li class="m_normal" onmouseover="nTabs(this,2)";>
            栏目3
            </li>
        </ul>
        <span style="clear:both;"></span>
        <!--鼠标栏目标题结束-->
    </div>                   
    <div class="mouse_lm_content">
        <!--鼠标栏目开始-->  
        <div id="menu_31_Content0">  
            <ul>
            <li>内容1</li> 
            </ul> 
        </div>
        <div style="display:none;" id="menu_31_Content1">
            <ul>
            <li>内容2</li> 
            </ul> 
        </div>
        <div style="display:none;" id="menu_31_Content2">
            <ul>
            <li>内容3</li> 
            </ul> 
        </div>
        <!--鼠标栏目结束-->  
    </div>                 
</div>
</body>
</html>
  • Tags:

发表评论/留言

为了您的身体健康、潇洒、美丽、帅气,请不要灌水。

/ 快捷键:Ctrl+Enter