选项卡技术几种方法

原创 于 2008-03-31 23:38:00 发布 · 926 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#border #table #function #float #html #javascript

1、其中最简单的一种就是排版成选项卡式的样式，点击每一个就是一个页面，当前页面就是当前选项卡，配上几个图片就ok

 

<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
body {
    margin-left: 100px;
    margin-top: 100px;
    margin-right: 100px;
    margin-bottom: 100px;
}
.font1 {
    font-family: "宋体";
    font-size: 12px;
    line-height: 18px;
    font-weight: normal;
    color: #666666;
    text-decoration: none;
}
-->

</style>
<script language="javascript" >
    var PubObjs = document.getElementsByName("tagID");
    
    
    function SelectObject(SelObj, DefaultClass, SelClass) 
    {
        //alert(SelObj.id);
        //alert(window.event.srcElement.parentElement.parentElement.id);
        var Objs = document.getElementsByName(SelObj.id);
        for(var i = 0; i<Objs.length; i++)
        {
            Objs[i].className = DefaultClass;
        }        
        SelObj.className = SelClass;
    }
    
    function SelectNewObject(SelIndex, DefaultClass, SelClass) 
    {
        CurObj = SelIndex;
        for(var i = 0; i<3; i++)
        {
           if( i == SelIndex )
            {
               document.getElementById("Img"+SelIndex).style.cursor =  "hand";
               document.getElementById("Img"+SelIndex).src = "images/Cur_top_"+SelIndex+".jpg";
            }
            else
            {
                 document.getElementById("Img"+i).style.cursor =  "hand";
               document.getElementById("Img"+i).src = "images/top_"+i+".jpg";
            }
        }
    }
    
    var VarASty = "";
    var VarSpanSty = "";
    var CurObj = 0;
    
    function SwitchSty(obj)
    {
        document.getElementById("Img"+obj).style.cursor =  "hand";
        document.getElementById("Img"+obj).src = "images/Cur_top_"+obj+".jpg";
    } 
    
    function SwitchInitSty(obj)
    {
        //alert(obj);
        if(CurObj != obj)
        {
          //document.getElementById("current"+obj).children(0).style.cssText = VarASty;
          //document.getElementById("span"+obj).style.cssText = VarSpanSty;
          document.getElementById("Img"+obj).style.cursor =  "hand";
          document.getElementById("Img"+obj).src = "images/top_"+obj+".jpg";
        }
    } 
</script>
</head>

<body>
<table width="573" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="7" align="left" valign="top" bgcolor="#666666"><img src="images/left.jpg" width="8" height="35" /></td>
    <td width="558" height="35" align="left" valign="top" background="images/top_05.jpg" bgcolor="#333333">
    
    <table width="558" height="35" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td width="126" align="left" valign="bottom">&nbsp;</td>
        <td width="89" align="left" valign="bottom"><a onmouseover="SwitchSty(0)" onmouseout="SwitchInitSty(0)"  href="System_Set_Main.htm"  target="main" onClick="SelectNewObject(0, 'Normal', 'Selected')"><img id="Img0" src="images/Cur_top_0.jpg" width="89" height="28" border="0" /></a></td>
        <td width="89" align="left" valign="bottom"><a onmouseover="SwitchSty(1)" onmouseout="SwitchInitSty(1)" href="Admin_Mrg_Main.htm"  target="main" onClick="SelectNewObject(1, 'Normal', 'Selected')"><img id="Img1" src="images/top_1.jpg" width="89" height="28" border="0" /></a></td>
        <td width="89" align="left" valign="bottom"><a onmouseover="SwitchSty(2)" onmouseout="SwitchInitSty(2)" href="User_Mgr_Main.htm"  target="main" onClick="SelectNewObject(2, 'Normal', 'Selected')"><img id="Img2" src="images/top_2.jpg" width="89" height="28" border="0"/></a></td>
        <td align="left" valign="bottom">&nbsp;</td>
      </tr>
    </table>
    
    </td>
    <td width="7" align="left" valign="top"><img src="images/right.jpg" width="7" height="35" /></td>
  </tr>
  <tr>
    <td colspan="3" align="left" valign="top" background="images/backgrund.jpg">
    
    sdsf'sdfsfsdf
    
    
    sdffsdfksdfps
    
    
    </td>
  </tr>
  <tr>
    <td height="6" align="left" valign="top"><img src="images/down_28.jpg" width="7" height="6" /></td>
    <td height="6" align="left" valign="top" background="images/down_30.jpg"></td>
    <td height="6" align="left" valign="top"><img src="images/down_32.jpg" width="7" height="6" /></td>
  </tr>
</table>
</body>
</html>

 2、第二种就是学习csdn后台这样的

 

<!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>
<style type="text/css">
    *{
 margin:0px;
 padding:0px;
 }
#tabsF {
 float:left;
 width:100%;
 font-size:12px;
 line-height:30px;
 /*border-bottom:2px solid #666;*/
 margin-top:5px;
}
#tabsF ul {
 margin:0;
 padding:0px 10px 0px 50px;
 list-style:none;
}
#tabsF li {
 display:inline;
 margin:0;
 padding:0;
 }
#tabsF a {
 float:left;
 background: transparent url("../images/Top/Nav_9.gif") no-repeat left top;
 margin:0;
 padding:0 0 0 3px;
 text-decoration:none;
}
#tabsF a span {
 float:left;
 display:block;
 margin:0;
 background: transparent url("../images/Top/Nav_9.gif") no-repeat right top;
 padding:6px 15px 0px 10px;
}

/* Commented Backslash Hack hides rule from IE5-Mac */
    #tabsF a span {float:none;}
    #tabsF a span {background-position:100% 0px;}
/* End IE5-Mac hack */
#tabsF a:hover span {color:#000;}
/*#tabsF a:hover {background-position:0% -42px;}
#tabsF a:hover span {background-position:100% -42px;}
#tabsF #current a {background-position:0% -42px;}
#tabsF #current a span {background-position:100% -42px;}
*/
#tabsF a:hover { background: transparent url("../images/Top/Nav_1.gif") no-repeat left top;background-position:0% 0px;}
#tabsF a:hover span {background: transparent url("../images/Top/Nav_2.gif") no-repeat right top;background-position:100% 0px;}

#tabsF #current a {background: transparent url("../images/Top/Nav_1.gif") no-repeat left top;}
#tabsF #current a span { background: transparent url("../images/Top/Nav_2.gif") no-repeat right top;}

#tabsF #current a {background-position:0% 0px;}
#tabsF #current a span {background-position:100% 0px;}
</style>
</head>
<body>

<div id="tabsF">
<span id="ctl00_menu"></span><ul><li id="current"><a href="Default.aspx"><span>后台首页</span></a></li><li><a href="PostList.aspx"><span>管理文章</span></a></li><li><a href="PostEdit.aspx"><span>写新文章</span></a></li><li><a href="ArticleList.aspx"><span>收藏</span></a></li><li><a href="AdminGroups.aspx"><span>圈子</span></a></li><li><a href="Feedback.aspx"><span>评论</span></a></li><li><a href="EditLinks.aspx"><span>链接</span></a></li><li><a href="EditGalleries.aspx"><span>相册</span></a></li><li><a href="EditKeywords.aspx"><span>关键字</span></a></li><li><a href="Referrers.aspx"><span>访问来源</span></a></li><li><a href="Configure.aspx"><span>配置</span></a></li><li><a href="Preferences.aspx"><span>参数选择</span></a></li><li><a href="http://hi.youkuaiyun.com"><span>个人空间</span></a></li></ul>
</div>



<TABLE  cellSpacing="0" cellPadding="0" width="400" border="0">
<TR><TD style="font-family:黑体;width:1%;" nowrap>学校要闻回顾</TD><TD>&nbsp;</TD></TR>
<TR><TD bgcolor="#0232B8" height="2px"></TD><TD bgcolor="#0232B8" ></TD></TR></TABLE>


</body>
</html>

 

有几张图片就可以实现了。

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值