如何在web里面做出像应用程序里面tabcontrol控件那样的效果？
我要在web里面做出tabcontrol标签那样的效果。最好能提供源码。
[解决办法]
微软的tab控件div> <table cellSpacing= "0 " cellPadding= "0 " width= "95% " align= "center " border= "0 "> <tr> <td align= "left " colspan= "5 "> <iewc:TabStrip ID= "tabSItem " runat= "server " TargetID= "MultiPage1 " SepDefaultStyle= "width:0px; " TabDefaultStyle= "width:80px;border:solid 1px black;background:#dddddd;padding:3px;text-align:center;text-decoration:none; " TabHoverStyle= "color:red; " TabSelectedStyle= "background:white;border-bottom:none " AutoPostBack= "True " OnSelectedIndexChange= "tabSItem_SelectedIndexChange "> <iewc:Tab Text= "活动 " TargetID= "myOption1 "> </iewc:Tab> <iewc:Tab Text= "报备 " TargetID= "myOption2 "> </iewc:Tab> <iewc:Tab Text= "询价 " TargetID= "myOption3 "> </iewc:Tab> </iewc:TabStrip> <iewc:MultiPage ID= "MultiPage1 " runat= "server "> <iewc:pageview ID= "myOption1 "> <SmartWeb:SmartGrid ID= "CRMGRID1 " runat= "server " AllowPaging= "True " OnPageIndexChanged= "CRMGRID1_PageIndexChanged "> <Columns> <SmartWeb:SmartGridColumn ColumnName= "NumberID " HeaderText= "NumberID " Visible= "False " /> <SmartWeb:SmartGridColumn ColumnName= "EventSubject " HeaderText= "活动主题 " Width= "150px " /> <SmartWeb:SmartGridColumn ColumnName= "CustomerName " HeaderText= "客户 " Width= "150px " /> <SmartWeb:SmartGridColumn ColumnName= "ContactName " HeaderText= "联系人 " Width= "60px " /> <SmartWeb:SmartGridColumn ColumnName= "EventTypeName " HeaderText= "活动类型 " Width= "60px " /> <SmartWeb:SmartGridColumn ColumnName= "ActiveModeName " HeaderText= "交流方式 " Width= "60px " /> <SmartWeb:SmartGridColumn ColumnName= "EventMainStaffName " HeaderText= "主负责人 " Width= "60px " /> <SmartWeb:SmartGridColumn ColumnName= "ChanceName " HeaderText= "机会 " Width= "150px " /> <SmartWeb:SmartGridColumn ColumnName= "EventStartDate " HeaderText= "开始时间 " /> <SmartWeb:SmartGridColumn ColumnName= "EventEndDate " HeaderText= "结束时间 " /> <SmartWeb:SmartGridColumn ColumnName= "EventBuildDate " HeaderText= "建立时间 " /> </Columns> </SmartWeb:SmartGrid> </iewc:pageview> <iewc:pageview ID= "myOption2 "> <SmartWeb:SmartGrid ID= "CRMGRID2 " runat= "server " AllowPaging= "True " OnPageIndexChanged= "CRMGRID2_PageIndexChanged "> <Columns> <SmartWeb:SmartGridColumn ColumnName= "NumberID " HeaderText= "NumberID " Visible= "False " /> <SmartWeb:SmartGridColumn ColumnName= "EventSubject " HeaderText= "报备主题 " Width= "150px " /> <SmartWeb:SmartGridColumn ColumnName= "CustomerName " HeaderText= "客户 " Width= "150px " /> <SmartWeb:SmartGridColumn ColumnName= "ContactName " HeaderText= "联系人 " Width= "60px " /> <SmartWeb:SmartGridColumn ColumnName= "EventTypeName " HeaderText= "活动类型 " Width= "60px " /> <SmartWeb:SmartGridColumn ColumnName= "ActiveModeName " HeaderText= "交流方式 " Width= "60px " /> <SmartWeb:SmartGridColumn ColumnName= "EventMainStaffName " HeaderText= "主负责人 " Width= "60px " /> <SmartWeb:SmartGridColumn ColumnName= "ChanceName " HeaderText= "机会 " Width= "150px " /> <SmartWeb:SmartGridColumn ColumnName= "EventStartDate " HeaderText= "开始时间 " /> <SmartWeb:SmartGridColumn ColumnName= "EventEndDate " HeaderText= "结束时间 " /> <SmartWeb:SmartGridColumn ColumnName= "EventBuildDate " HeaderText= "建立时间 " /> </Columns> </SmartWeb:SmartGrid> </iewc:pageview> <iewc:pageview ID= "myOption3 "> <SmartWeb:SmartGrid ID= "CRMGRID3 " runat= "server " AllowPaging= "True " OnPageIndexChanged= "CRMGRID3_PageIndexChanged "> <Columns> <SmartWeb:SmartGridColumn ColumnName= "NumberID " HeaderText= "NumberID " Visible= "False " /> <SmartWeb:SmartGridColumn ColumnName= "EventSubject " HeaderText= "询价主题 " Width= "150px " /> <SmartWeb:SmartGridColumn ColumnName= "CustomerName " HeaderText= "客户 " Width= "150px " /> <SmartWeb:SmartGridColumn ColumnName= "ContactName " HeaderText= "联系人 " Width= "60px " /> <SmartWeb:SmartGridColumn ColumnName= "EventTypeName " HeaderText= "活动类型 " Width= "60px " /> <SmartWeb:SmartGridColumn ColumnName= "ActiveModeName " HeaderText= "交流方式 " Width= "60px " /> <SmartWeb:SmartGridColumn ColumnName= "EventMainStaffName " HeaderText= "主负责人 " Width= "60px " /> <SmartWeb:SmartGridColumn ColumnName= "ChanceName " HeaderText= "机会 " Width= "150px " /> <SmartWeb:SmartGridColumn ColumnName= "EventStartDate " HeaderText= "开始时间 " /> <SmartWeb:SmartGridColumn ColumnName= "EventEndDate " HeaderText= "结束时间 " /> <SmartWeb:SmartGridColumn ColumnName= "EventBuildDate " HeaderText= "建立时间 " /> </Columns> </SmartWeb:SmartGrid> </iewc:pageview> </iewc:MultiPage> </td> <td> </td> </tr> </table> </div>
[解决办法]
asp.net ajax toolkit里有提供这个控件
不过这种效果..用js简单的控件div的切换就行了...
[解决办法]
直接用JS也行，copy了别人一份：
<!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 { font-size:14px; font-family: "宋体 "}
ol li { margin:8px}
#con { font-size:12px; width:600px; margin:0 auto}
#tags { height:23px; width:400px; margin:0; padding:0; margin-left:10px}
#tags li { float:left; margin-right:1px; background:url(http://www.happyshow.org/sample/20061108/images/tagleft.gif) no-repeat left bottom; height:23px; list-style-type:none}
#tags li a { text-decoration:none; float:left; background:url(http://www.happyshow.org/sample/20061108/images/tagright.gif) no-repeat right bottom; height:23px; padding:0px 10px; line-height:23px; color:#999}
#tags li.emptyTag { width:4px; background:none}
#tags li.selectTag { background-position: left top; position:relative; height:25px; margin-bottom:-2px}
#tags li.selectTag a { background-position: right top; color:#000; height:25px; line-height:25px;}
#tagContent { padding:1px; background-color:#fff; border:1px solid #aecbd4;width:100%;}
.tagContent { background:url(http://www.happyshow.org/sample/20061108/images/bg.gif) repeat-x; height:350px; padding:10px; color:#474747; width:576px; display:none}
#tagContent div.selectTag{ display:block}
.tagFrame{
background:url(http://www.happyshow.org/sample/20061108/images/bg.gif) repeat-x;
}
</style>
<SCRIPT LANGUAGE= "JavaScript ">
<!--
function getTab(flag) {
var elList, i;
elList = document.getElementsByTagName( "li ");
for (i = 0; i < elList.length; i++){
elList[i].className = " ";
}
elList[flag].className = "selectTag ";
elList[flag].blur();
}
function goto(flag){
if( "0 "==flag){
document.all.tabIframe.src= "http://www.google.com ";
}else if( "1 "==flag){
document.all.tabIframe.src= "http://www.baidu.com ";
}else if( "2 "==flag){
document.all.tabIframe.src= "http://www.sogou.com ";
}
getTab(parseInt(flag));
}
//-->
</SCRIPT>
</head>
<body>
<h1> 标签示例 </h1>
<div id= "con ">
<ul id= "tags ">
<li> <a href= "javascript:void(0) " onclick= "goto( '0 '); "> 标签一 </a> </li>
<li class= "selectTag "> <a href= "javascript:void(0) " onclick= "goto( '1 '); "> 标签二 </a> </li>
<li> <a href= "javascript:void(0) " onclick= "goto( '2 '); "> 自适应宽度的标签 </a> </li>
</ul>
<div id= "tagContent ">
<iframe class= "tagFrame " name= "tabIframe " src= "http://www.google.com " marginheight= "8 " marginwidth= "8 " frameborder= "0 " width= "100% " height= "100% "> </iframe>
</div>
</div>
<script type= "text/javascript ">
function selectTag(showContent,url,selfObj){
// 操作标签
var tag = document.getElementById( "tags ").getElementsByTagName( "li ");
var taglength = tag.length;
for(i=0; i <taglength; i++){
tag[i].className = " ";
}
selfObj.parentNode.className = "selectTag ";
}
</script>
</body>
</html>
