div+css制作的选项卡_html/css

另一种

function toggleTo(img)
{
var ts=document.getElementById("tab").getElementsByTagName("div");
for(i=1;iif(img==i)
{
document.getElementById("oDIV"+i).style.display = "";
document.getElementById("oDIV"+i).parentNode.className+=" up";
}
else{
document.getElementById("oDIV"+i).style.display = "none";
document.getElementById("oDIV"+i).parentNode.className="tab"+i;
}
}
}
-->

软件下载

另一种

<% @ Page Language="C#" AutoEventWireup="true" CodeFile="Tab2.aspx.cs" Inherits="Tab2" %>



< html xmlns ="http://www.w3.org/1999/xhtml" >
< head runat ="server" >
< title > div+css选项卡代码
< meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" />
< meta name ="Author" content ="PR" />

< script type ="text/javascript" >

< style type ="text/css" >
/**//* 选项卡关键属性 */
#tab {}{ width:900px; height:30px; position:relative; margin:0px auto;} /**//*设置容器高宽等*/
html > body #tab {}{ width:900px; }/**//*兼容IE6:IE6下宽度不够*/
#tab div {}{ position:absolute; top:26px; left:0; width:900px; height:300px;}/**//*设置被操作容器高宽等*/
#tab div {}{ display:none; }/**//*设置被操作容器默认隐藏:不用ID是因为下面将利用class来控制被操作容器显示,而class优先级低于id选择器*/
#tab .block {}{ display:block; padding-left:5px; padding-right:5px; padding-top:2px;}/**//*选中的被操作容器*/
#tab h3 {}{ float:left; width:75px; height:26px; line-height:26px; margin:0 -1px 0 0; font-size:12px; cursor:pointer; font-weight:normal; text-align:center; color:#00007F; background:#eee url(menu_bg.gif) no-repeat; font-weight:bold;}/**//*默认标题样式*/
#tab .up {}{ background:#fff url(x20061212105231.gif) no-repeat; }/**//*选中的标题样式*/

/**//*修饰列表内容*/
#tab ul {}{ margin:0px; list-style:none; padding:0;}
#tab li {}{ float:left; width:50%; background: }
#tab li a {}{ display:block; width:84%; height:25px; line-height:25px; margin-left:8%; font-size:12px; text-decoration:none; color:#333;text-indent:10px; }
#tab li a:hover {}{ text-decoration:underline; color:#f00;}


< body >
< div id ="tab" >
< h3 class ="up" onmouseover ="go_to(1);" > 铁板牛排
< div class ="block" >

< script language ='JavaScript1.2' type ='text/JavaScript' src ='http://show.jianjie8.com/JS/ShowClass_Menu.js' >


< h3 onmouseover ="go_to(2);" > 田心鱼儿
< div >
2

< h3 onmouseover ="go_to(3);" > 萧萧小雨
< div >
3

< h3 onmouseover ="go_to(4);" > 禾火木风
< div >
4

< h3 onmouseover ="go_to(5);" > 章之小依
< div >
5

< script type ="text/javascript" >
var h=document.getElementById("tab").getElementsByTagName("h3");
var d=document.getElementById("tab").getElementsByTagName("div");
function go_to(ao){
for(var i=0;i if(ao-1==i){
h[i].className+=" up";
d[i].className+=" block";
}
else {
h[i].className=" ";
d[i].className=" ";
}
}
}
//-->