Vb.net 如何使用Css创建选项卡面板

我想使用css（而不是AJAX）创建选项卡面板。 有人能帮我吗

使用Ajax控件：

<asp:TabContainer ID="TabContainer1" runat="server" Height="120px" Width="99%" ActiveTabIndex="4"
                                        TabStripPlacement="Top"   CssClass="ajax__tab_xp" ScrollBars="Both" useverticalstripplacement="true"
                                        verticalstripwidth="100px">
<asp:TabPanel HeaderText="Exchange Rates" ID="TabPanel1" runat="server" Enabled="true"
                                            ScrollBars="Both">
</asp:TabPanel>
</asp:TabContainer>

---

但是我想要Css…

我将为您提供Css、HTML和代码。我最终没有使用工具箱中提供的AJAX选项卡控件。相反，我修改了我的纯CSS选项卡。这种方法非常适合我，可以删除页面上的所有回发闪烁。我是为IE环境开发的，所以CSS可能需要经过Tweek处理才能在其他浏览器中正确显示。我知道Firefox工作正常，但是填充有点不合适。我认为这是一种在页面上添加AJAX选项卡的好方法，可以轻松地修改选项卡的外观。我欢迎任何意见或建议。见下例：

CSS代码：

 /* CSS Document */


#tabcontent {
border-left:1px solid #000000;
border-right:1px solid #000000;
border-bottom:1px solid #000000;
padding:10px 5px 6px 5px;
}


/*Tab Navigation*/


ul#tabnav {
list-style-type:none;
margin:0;
padding-left:40px;
padding-bottom:24px;
border-bottom:1px solid #000000;
font: bold 11px verdana, arial, sans-serif;
}


ul#tabnav li {
float:left;
height:21px;
background-color:#C2DBF6;
color:#000000;
margin:2px 2px 0 2px;
border:1px solid #000000;


}


ul#tabnav a:link, ul#tabnav a:visited {
display:block;
color:#000000;
background-color:transparent;
text-decoration:none;
padding:4px;
}


ul#tabnav a:hover{
background-color:#72ABEB;
color:#FFFFFF;
}


ul#tabnav a.activeTab{
border-bottom:1px solid #FFFFFF;
color:#000000;
background-color:#FFFFFF;
}

现在HTML和代码：（web.config应该已经设置好，可以处理ajax控件）

选项卡布局

更多关于这方面的信息，您可以找到

HTMl-

<div class="tabGroup">
<input type="radio" name="tabGroup1" id="rad1" class="tab1" checked="checked"/>
<label for="rad1">Tab 1</label>

<input type="radio" name="tabGroup1" id="rad2" class="tab2"/>
<label for="rad2">Tab 2</label>

<input type="radio" name="tabGroup1" id="rad3" class="tab3"/>
<label for="rad3">Tab 3</label>

<br/>

<div class="tab1">Tab 1 content</div>
<div class="tab2">Tab 2 content</div>
<div class="tab3">Tab 3 content</div>
</div>

---

这可能会有帮助-你可以编辑你以前的答案，没有必要重复发布答案

<div class="tabGroup">
<input type="radio" name="tabGroup1" id="rad1" class="tab1" checked="checked"/>
<label for="rad1">Tab 1</label>

<input type="radio" name="tabGroup1" id="rad2" class="tab2"/>
<label for="rad2">Tab 2</label>

<input type="radio" name="tabGroup1" id="rad3" class="tab3"/>
<label for="rad3">Tab 3</label>

<br/>

<div class="tab1">Tab 1 content</div>
<div class="tab2">Tab 2 content</div>
<div class="tab3">Tab 3 content</div>
</div>

/* Set the size and font of the tab widget */
.tabGroup {
font: 10pt arial, verdana;
width: 800px;
height: 400px;
}

/* Configure the radio buttons to hide off screen */
.tabGroup > input[type="radio"] {
position: absolute;
left:-100px;
top:-100px;
}

/* Configure labels to look like tabs */
.tabGroup > input[type="radio"] + label {
/* inline-block such that the label can be given dimensions */
display: inline-block;

/* A nice curved border around the tab */
border: 1px solid black;
border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;

/* the bottom border is handled by the tab content div */
border-bottom: 0;

/* Padding around tab text */
padding: 5px 10px;

/* Set the background color to default gray (non-selected tab) */
background-color:#ddd;
}

/* Focused tabs need to be highlighted as such */
.tabGroup > input[type="radio"]:focus + label {
border:1px dashed black;
 }

/* Checked tabs must be white with the bottom border removed */
.tabGroup > input[type="radio"]:checked + label {
background-color:white;
font-weight: bold;
border-bottom: 1px solid white;
margin-bottom: -1px;
}

 /* The tab content must fill the widgets size and have a nice border */
.tabGroup > div {
display: none;
border: 1px solid black;
background-color: white;
padding: 10px 10px;
height: 100%;
overflow: auto;

box-shadow: 0 0 20px #444;
-moz-box-shadow: 0 0 20px #444;
-webkit-box-shadow: 0 0 20px #444;

border-radius: 0 5px 5px 5px;
-moz-border-radius: 0 5px 5px 5px;
-webkit-border-radius: 0 5px 5px 5px;
}

/* This matchs tabs displaying to thier associated radio inputs */
.tab1:checked ~ .tab1, .tab2:checked ~ .tab2, .tab3:checked ~ .tab3 {
display: block;
}