小马的天空
我为软狂

导航

 
简单的Tab切换
<html>
<head>
<style type="text/css">
    A:link {
    COLOR: #3d362b
}
A:visited {
    COLOR: #3d362b
}
A:hover {
    COLOR: #ff6600
}

UL {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
body{
background:#C8EBFF;
FONT-SIZE: 12px; TEXT-ALIGN: center;
color: #333;
margin:0px;
font-family:arial,verdana,sans-serif;
}
#header{
width:776px;
margin-right: auto;
margin-left: auto; 
padding: 0px;
background: #fff;
height:170px;
text-align:left;

} 


#header #PageTopLog
{
text-align:left; float:left; BORDER: #3A4BAD 0px solid; width:400px;
}
#header #PageTopLogRight
{
float:right; BORDER: #3A4BAD 0px solid; width:319px; text-align:right; height:100px
}

#header #PageTopLogRight #RegMenu
{ padding-top:10px;}

#header #PageTopLogRight #navbar {
padding-top:10px;
}
#header #PageTopLogRight #navbar LI {
    FONT-WEIGHT: bold; FLOAT: left; LINE-HEIGHT: 24px; TEXT-ALIGN: center
}
#header #PageTopLogRight #navbar UL LI.one {
    BORDER-TOP: #8ABDDC 1px solid; FONT-SIZE: 14px; BORDER-LEFT: #8ABDDC 1px solid; WIDTH: 93px; BORDER-BOTTOM: #8ABDDC 1px solid; BACKGROUND-COLOR: #ffffff
}
#header #PageTopLogRight #navbar LI#two {
    BORDER-RIGHT: #8ABDDC 1px solid; BORDER-TOP: #8ABDDC 1px solid; FONT-SIZE: 14px; BORDER-LEFT: #8ABDDC 1px solid; WIDTH: 64px; BORDER-BOTTOM: #8ABDDC 1px solid; BACKGROUND-COLOR: #ffffff
}
#header #navbar LI.two {
    BORDER-TOP: #8ABDDC 1px solid; FONT-SIZE: 14px; BORDER-LEFT: #8ABDDC 1px solid; WIDTH: 64px; BORDER-BOTTOM: #8ABDDC 1px solid; BACKGROUND-COLOR: #ffffff
}

#header #RollNews
{
 height:24px;  text-align:center;
}


#contain{
margin-right: auto;
margin-left: auto;
width: 776px;
}
 #mainbg{
width:776px;
padding: 0px;
background: #fff;
float: left;
}
#right{
float: right; 
margin: 2px 0px 2px 0px;
padding:0px; 
width: 574px; 
background: #fff;
text-align:left;
}
#left{
float: left; 
margin: 2px 2px 0px 0px; 
padding: 0px; 
background: #fff;
width: 200px;
text-align:left;BORDER: red 0px solid;
}

#GanjiGG
{
clear:both;
width:776px;
margin-right: auto;
margin-left: auto; 
padding: 0px;
background: #fff;
}
#PageBottom
{
clear:both;
width:776px;
margin-right: auto;
margin-left: auto; 
padding: 0px;
background: #fff;
}
#footer{
clear:both;
width:776px;
margin-right: auto;
margin-left: auto; 
padding: 0px;
background: #EEE;
height:60px;}
.text{margin:0px;padding:20px;}

.PageMainMenuT
{
widht:100%;BACKGROUND-IMAGE: url(IndexTop.gif); height:46px;  clear:both;BORDER: red 0px solid;PADDING-LEFT: 100px; 
}

.PageMainMenuT UL {
    PADDING-RIGHT: 0px; PADDING-LEFT: 80px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none; width:540px; border:red 0px solid;
}

.PageMainMenuT UL li
{
  padding-right:10px; padding-left:10px;
}
    
.activedTab {
    BORDER-RIGHT: #3A4BAD 1px solid; BORDER-bottom: #C8EBFF 1px solid; BORDER-TOP: #3A4BAD 1px solid; FONT-WEIGHT: bold; FONT-SIZE: 14px; FLOAT: left; BORDER-LEFT: #3A4BAD 1px solid; WIDTH:auto; COLOR: #330000; LINE-HEIGHT: 25px; PADDING-TOP: 6px; BACKGROUND-COLOR: #C8EBFF; TEXT-ALIGN: center
}
.nTab{
    FONT-WEIGHT: bold; FONT-SIZE: 12px; FLOAT: left;  BACKGROUND-IMAGE: url(IndexTop.gif); WIDTH: auto; CURSOR: hand; COLOR: #ffffff; LINE-HEIGHT: 32px; PADDING-TOP: 3px; HEIGHT: 19px! important; TEXT-ALIGN: center; TEXT-DECORATION: underline
}

#left #LeftOne,#left #LeftTwo,#right #RightOne
{
widht:100%;BACKGROUND-IMAGE: url(NoIndexTop.gif); height:26px;   text-align:center;BORDER: red 0px solid;
}


#left #LeftOneMain,#left #LeftTwoMain,#right #RightOneMain

{
 height:110;  BORDER-RIGHT: #3A4BAD 1px solid; BORDER-bottom: #3A4BAD 1px solid;BORDER-left: #3A4BAD 1px solid;
 
 BACKGROUND: url(NoIndexTopBottom.gif) repeat-X top  ;
 
}

#left #LeftOne UL,#left #LeftTwo UL ,#right #RightOne UL{
    PADDING-RIGHT: 0px;  PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none; width:100%; border:red 0px solid; PADDING-LEFT:20PX;
}

#left #LeftOne UL li,#left #LeftTwo UL li,#right #RightOne UL li
{
  padding-right:10px; padding-left:10px;
}

.MenuactivedTab {
    BORDER-RIGHT: #3A4BAD 1px solid; BORDER-bottom: #C8EBFF 1px solid; BORDER-TOP: #3A4BAD 1px solid; FONT-WEIGHT: bold; FONT-SIZE: 12px; FLOAT: left;  BORDER-LEFT: #3A4BAD 1px solid; WIDTH:auto; COLOR: #330000; LINE-HEIGHT: 22px; PADDING-TOP: 2px; BACKGROUND-COLOR: #C8EBFF; TEXT-ALIGN: center
}
.MenunTab{
    FONT-WEIGHT: bold; FONT-SIZE: 12px; FLOAT: left;  BACKGROUND-IMAGE: url(NoIndexTop.gif); WIDTH: auto; CURSOR: hand; COLOR: #ffffff; LINE-HEIGHT: 22px; PADDING-TOP: 3px; HEIGHT: 19px! important; TEXT-ALIGN: center; TEXT-DECORATION: underline
}


</style>
<script>
        function doclick(srcObj,searchID){
            var tabList = srcObj.parentNode.getElementsByTagName("li");
            if(srcObj.className=="activedTab")return;
            for(var i=0;i<tabList.length;i++){
                if(tabList[i].className=="activedTab")tabList[i].className="nTab";
            }
            searchActivedItem = searchID;
            srcObj.className = "activedTab";//TAB切换
}

        
        
        
        function doclick2(srcObj,searchID){
            var tabList = srcObj.parentNode.getElementsByTagName("li");
            if(srcObj.className=="MenuactivedTab")return;
            for(var i=0;i<tabList.length;i++){
                if(tabList[i].className=="MenuactivedTab")tabList[i].className="MenunTab";
            }
            searchActivedItem = searchID;
            srcObj.className = "MenuactivedTab";//TAB切换
}
        </script>
</head>
<body>
<div id="header">
    <div id="PageTopLog"> <img src="Log.gif" /></div>
        
            <div id="PageTopLogRight">
                
                <div id="RegMenu"><img src="register_button.gif" alt="免费注册" /> <img src="login_button.gif" alt="登陆" />    <A href="http://trust.alibaba.com.cn/" target=_blank>关于我们</A>┆<A href="http://trust.alibaba.com.cn/credit/cxaq.shtml" target=_blank>意见反馈</A>┆<A href="http://alitalk.alibaba.com.cn/?tracelog=alitalk_index_nav" 
target=_blank>联系我们</A></div><DIV id=NavBar>
<UL>
  <LI class=one><A class=M 
  onmousedown="return aliclick(this,'?tracelog=ui_chinaindex_navbuyer');" 
  href="http://china.alibaba.com/buy/index.html">我要采购</A> </LI>
  <LI class=one><A class=M 
  onmousedown="return aliclick(this,'?tracelog=ui_chinaindex_navseller');" 
  href="http://china.alibaba.com/sell/index.html">我要销售</A> </LI>

  <LI class=two><A class=M 
  onmousedown="return aliclick(this,'?tracelog=ui_chinaindex_navnews');" 
  href="http://info.china.alibaba.com/">资讯</A> </LI>
  <LI class=two id=two><A class=M 
  onmousedown="return aliclick(this,'?tracelog=ui_chinaindex_navclub');" 
  href="http://club.china.alibaba.com/">论坛</A> </LI></UL></DIV> </div>
  
  
  
<div class="PageMainMenuT" ><ul><li onclick=javascript:doclick(this,1) class="activedTab" >首页</li><li onclick=javascript:doclick(this,1) class="nTab">会员中心</li><li onclick=javascript:doclick(this,1) class="nTab">货运综合查询</li><li onclick=javascript:doclick(this,1) class="nTab">服务中心</li><li onclick=javascript:doclick(this,1) class="nTab">论坛</li></ul></div>
<div id="RollNews">近期总成交额:12132332元 成交订单总数:121323笔  今日新供应:2242423条 </div>
    </div>
<div id="contain">
<div id="mainbg">
<div id="right">
<div id="RightOne">
    <ul><li onclick=javascript:doclick2(this,1) class="MenuactivedTab">供方信息</li><li onclick=javascript:doclick2(this,1) class="MenunTab">求方信息</li></ul>        
        </div>
    <div id="RightOneMain">
</div>
</div>
<div id="left">
    <div id="LeftOne">
        <ul><li onclick=javascript:doclick2(this,1) class="MenuactivedTab">登陆</li><li onclick=javascript:doclick2(this,1) class="MenunTab">激活</li></ul>        
        </div>
    <div id="LeftOneMain">
</div>
<div id="LeftTwo">
        <ul><li  class="MenuactivedTab">智能搜索</li></ul>        
        </div>
    <div id="LeftTwoMain">
</div>



</div>
</div>

<div id="GanjiGG"><img src="ganji2.gif" /></div>

<div id=PageBottom>
    <div></div><div></div><div></div>
    
    </div>
<div id="footer">footer</div>
</body>
</html>


代码：https://files.cnblogs.com/mhx1982/dateControlImages.rar
posted on 2006-09-04 17:48  Vinson  阅读(1032)  评论(1)    收藏  举报
 
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3