在asp.net中怎么做出标签的效果？

Question

如题·我想做出像在window下点击一个标签就显示不同的内容和控件·在这个网页中我有几个datagrid，我想做成标签的效果·点击每个标签都显示不同的datagrid，请问怎么做啊·

Answer 1

可用表格或div来画.根据点击不同区域显示不同内容.

Answer 2

你也可以用面板来做，点击每个标签的时候，设置每个装有不同datagrid的面板的Visable属性

Answer 3

需要用 微软的控件的<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>