Question

我想使用css创建Tab面板（不使用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 ......

Answer 1

我将为您提供CSS，HTML和代码隐藏。我最终没有使用Toolkit中提供的AJAX选项卡控件。相反，我修改了我的Pure CSS选项卡。这种方法对我很有用，并删除了页面上的所有回发闪烁。我正在为IE环境开发，因此CSS可能需要在其他浏览器中正确显示。我知道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控件）

<head runat="server"><!--Make sure you add the the runat property to the HEAD tag or your page will break if you try and use the AJAX Toolkit-->
<link rel="stylesheet" type="text/css" href="css/ajaxnav.css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Tab Layout</title>

有关此内容的更多信息，您可以找到HERE

Answer 2

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>

CSS -

/* 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;
}

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

2 个答案: