网易切换效果代码

作者：袖梨 2022-07-02

提示：您可以先修改部分代码再运行

<!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"  xml:lang="zh-CN" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>163 Tab</title>
<style type="text/<a href="http://www.111com.net/cssdiv/css.html" target="_blank">css</a>">
<!--
/* 全局CSS定义 */
body { text-align: center; font-family:"宋体", arial;margin:0; padding:0; background: #FFF; font-size:12px; color:#000;}

/* 2列 */
.divArea{margin:0 auto; background:url("images/bg.gif");}
.divArea .Col1{float:left; }
.divArea .Col2{float:right; }

/* 左边选项卡 */
.naTab{clear:both;border-bottom:1px #CCCCCC solid;}
.naTab .TabTitle{  clear:both;overflow:hidden;}
.naTab .TabTitle ul{margin:0; padding:0;}
.naTab .TabTitle li{ list-style-type:none; padding:6px 0 2px;cursor:pointer;}
.naTab .TabTitle .active{ float:left;background:url("images/bg5_6_1.gif");}
.naTab .TabTitle .normal{ float:left;background:url("images/bg5_6_2.gif");}
.naTab .TabContent {padding:10px;}

/* 右边选项卡 */
.n4Tab{clear:both;border-bottom:1px #CCCCCC solid;}
.n4Tab .TabTitle{}
.n4Tab .TabTitle ul{margin:0; padding:0;}
.n4Tab .TabTitle li{float:left;   list-style-type:none;cursor:pointer;}
.n4Tab .TabTitle li h6{font-size:12px; font-weight:normal; padding:8px 0 0;margin:0;}
.n4Tab .TabTitle .normal{background:url("images/admenu_bg2.gif");}
.n4Tab .TabTitle .active{background:url("images/admenu_bg1.gif");}
.n4Tab .TabContent {padding:10px;}

.none {display:none;}
-->
</style>
<script type="text/javascript">
function nTabs(tabObj,obj){
	var tabList = document.getElementById(tabObj).getElementsByTagName("li");
	for(i=0; i <tabList.length; i++)
	{
		if (tabList[i].id == obj.id)
		{
			document.getElementById(tabObj+"_Title"+i).className = "active"; 
    		document.getElementById(tabObj+"_Content"+i).style.display = "block";
		}else{
			document.getElementById(tabObj+"_Title"+i).className = "normal"; 
			document.getElementById(tabObj+"_Content"+i).style.display = "none";
		}
	} 
}
</script>
</head>
<body>
<br />

<div class="divArea">
  
  <div class="Col1">
    
    <div class="naTab" id="naTab" style="">
      <div class="TabTitle">
        <ul>
          <li id="naTab_Title0" onclick="nTabs('naTab',this);" class="active"><a href="javascript:void(0);">娱乐</a></li>
          <li id="naTab_Title1" onclick="nTabs('naTab',this);" class="normal"><a href="javascript:void(0);">女人</a></li>
          <li id="naTab_Title2" onclick="nTabs('naTab',this);" class="normal"><a href="javascript:void(0);">汽车</a></li>
        </ul>
      </div>
      <div class="TabContent">
        <div id="naTab_Content0"> gg </div>
        <div id="naTab_Content1" class="none">ddddddd gg </div>
        <div id="naTab_Content2" class="none">rfffffffff</div>
      </div>
      
    </div>
  </div>
  
  <div class="Col2">
    
    <div class="n4Tab" id="n4Tab" style="">
      <div class="TabTitle">
        <ul>
          <li id="n4Tab_Title0" onmouseover="nTabs('n4Tab',this);" class="active"><h6><a href="javascript:void(0);">资讯</a></h6></li>
          <li id="n4Tab_Title1" onmouseover="nTabs('n4Tab',this);" class="normal"><h6><a href="javascript:void(0);">教育</a></h6></li>
          <li id="n4Tab_Title2" onmouseover="nTabs('n4Tab',this);" class="normal"><h6><a href="javascript:void(0);">房产</a></h6></li>
          <li id="n4Tab_Title3" onmouseover="nTabs('n4Tab',this);" class="normal"><h6><a href="javascript:void(0);">招商</a></h6></li>
          <li id="n4Tab_Title4" onmouseover="nTabs('n4Tab',this);" class="normal"><h6><a href="javascript:void(0);">拍卖</a></h6></li>
        </ul>
      </div>
      <div class="TabContent">
        <div id="n4Tab_Content0"> ah </div>
        <div id="n4Tab_Content1" class="none"> sh </div>
        <div id="n4Tab_Content2" class="none"> dh </div>
        <div id="n4Tab_Content3"  class="none"> vh </div>
        <div id="n4Tab_Content4" class="none"> nh </div>
      </div>
    </div>
	
  </div>
</div>

</body>
</html>

提示：您可以先修改部分代码再运行

网易切换效果代码

相关文章

精彩推荐