Tab切换
<%@ Page Language="C#" AspCompat="true" %>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.SqlClient" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
shuyu.DataSql Dsql = new shuyu.DataSql();
protected void Page_Load(object sender, EventArgs e)
{
//SqlDataReader sdr = Dsql.ExecuteReader("select top(1) 编号 from 企业网站设置 where 编号>" + Request.QueryString["id"].ToString() + " order by 编号");
//while (sdr.Read())
//{
// //try
// //{
// shuyu.HtmlToImage thumb = new shuyu.HtmlToImage("http://ent.china2car.com/" + sdr["编号"].ToString() + "/", 930, 730, 930, 730);
// System.Drawing.Bitmap x = thumb.GetBitmap();
// string SavedFileName = "/upload/template/Index/" + sdr["编号"].ToString() + ".jpg";
// x.Save(Server.MapPath(SavedFileName));
// x.Dispose();
// Dsql.SaveThumbnailImage(SavedFileName, SavedFileName, 308, 231, 100L);
// Dsql.ExecuteNonQuery(string.Format("UPDATE 企业网站设置 SET 首页缩略图='{1}' where 编号={0}", sdr["编号"].ToString(), SavedFileName));
// //Response.Write(string.Format("<script>location.href='{0}'</" + "script>", "/test.aspx?ID=" + sdr["编号"].ToString()));
// Response.Write("<script>window.opener=null;window.open('','_top');window.close();window.open('/test.aspx?id=" + sdr["编号"].ToString() + "');<" + "/script>");
// // }
// // catch
// // {
// // Response.Write(sdr["编号"].ToString() + "错误<br />");
// // Response.Flush();
// // }
//}
//sdr.Close();
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<link href="/Themes/common.css" type="text/css" rel="stylesheet" />
<style >
.callboard .wenti{width:240px;height:35px;background-image:url(/Themes/images/index/wenti_bg_img.jpg);}
.callboard .wenti .button{float:left;width:80px;height:25px;text-align:center;color:#CC0000;padding-top:10px;}
.callboard .wenti .button a{width:80px;height:25px;color:#CC0000;text-align:center;text-decoration:none;}
.callboard .wenti .button a:hover{width:80px;height:25px;color:#CC0000;text-align:center;text-decoration:none;}
.callboard .wenti .buttonactive{float:left;width:80px;height:25px;text-align:center;background-image: url(/Themes/images/index/wenti_button_bg_img.jpg);color:#CC0000;font-weight:bold;padding-top:10px;}
.callboard .wenti .buttonactive a{width:80px;height:25px;color:#CC0000;font-weight:bold;text-align:center;background-image: url(/Themes/images/index/wenti_button_bg_img.jpg);text-decoration:none;background-position:center; text-decoration:none;}
.callboard .wenti .buttonactive a:hover{width:80px;height:25px;color:#CC0000;font-weight:bold;text-align:center;background-image:url(/Themes/images/index/wenti_button_bg_img.jpg);text-decoration:none;font-weight:bold;}
.callboard .wenticontent {width:240px; height:100px; text-align:left; border:#cccccc; border-width:1px; border-style:solid;padding:1px;}
.callboard .wenticontent .content { display:none;}
.callboard .wenticontent .contentactive { display:block;}
.callboard .wenticontent ul{width:230px;margin:5px;padding:0px; list-style-type:none;}
.callboard .wenticontent ul li{float:left;width:220px;padding:5px;}
.guanggao{width:245px;float:right;}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="callboard">
<div class="wenticontent">
<div class="wenti">
<div class="buttonactive" id='st_div1'>
<a onmouseover="setTab(1,3,'st_div','wt_nr','buttonactive','button');" href="javascript:void(0)">标题一</a></div>
<div class="button" id='st_div2'>
<a onmouseover="setTab(2,3,'st_div','wt_nr','buttonactive','button');" href="javascript:void(0)">标题二</a></div>
<div class="button" id='st_div3'>
<a onmouseover="setTab(3,3,'st_div','wt_nr','buttonactive','button');" href="javascript:void(0)">标题三</a></div>
</div>
<div class="contentactive" id='wt_nr1' style="display: block;">
内容一</div>
<div class="content" id='wt_nr2' style="display: none;">
内容二</div>
<div class="content" id='wt_nr3' style="display: none;">
内容三</div>
</div>
</div>
<div class="callboard">
<div class="wenticontent">
<div class="wenti">
<div class="buttonactive" id='st_div11'>
<a onmouseover="setTab(1,3,'st_div1','wt_nr1','buttonactive','button');" href="javascript:void(0)">标题一</a></div>
<div class="button" id='st_div12'>
<a onmouseover="setTab(2,3,'st_div1','wt_nr1','buttonactive','button');" href="javascript:void(0)">标题二</a></div>
<div class="button" id='st_div13'>
<a onmouseover="setTab(3,3,'st_div1','wt_nr1','buttonactive','button');" href="javascript:void(0)">标题三</a></div>
</div>
<div class="contentactive" id='wt_nr11' style="display: block;">
内容一</div>
<div class="content" id='wt_nr12' style="display: none;">
内容二</div>
<div class="content" id='wt_nr13' style="display: none;">
内容三</div>
</div>
</div>
</form>
</body>
</html>
<script type="text/javascript" language="javascript">
//i 编号； num 总的栏目数量； fid 父级DIV/LI id；nrid 内容id； SelectStyle 选中后的样式名称；NoStyle未选中的样式名称；
function setTab(i, num, fid, nrid, SelectStyle, NoStyle)//TAB通用样式
{
for (var j = 1; j <= num; j++)//
{
if (j == i)//
{
document.getElementById(fid + j).className = SelectStyle;
document.getElementById(nrid + j).style.display = "block";
}
else//
{
document.getElementById(fid + j).className = NoStyle;
document.getElementById(nrid + j).style.display = "none";
}
}
}
</script>
