选项卡技术几种方法
2008-03-31 23:38
302 查看
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"> </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"> </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.csdn.net"><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> </TD></TR>
<TR><TD bgcolor="#0232B8" height="2px"></TD><TD bgcolor="#0232B8" ></TD></TR></TABLE>
</body>
</html>
有几张图片就可以实现了。
<!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"> </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"> </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.csdn.net"><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> </TD></TR>
<TR><TD bgcolor="#0232B8" height="2px"></TD><TD bgcolor="#0232B8" ></TD></TR></TABLE>
</body>
</html>
有几张图片就可以实现了。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 