Как создать панель вкладок с помощью Css

Question

Я хочу создать панель вкладок с помощью css (не использовать AJAX). Может ли кто-нибудь мне помочь?

Использование Ajax Control:

<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

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

Answer 2

Я дам вам CSS, HTML и код-сзади. В итоге я не использовал элемент управления вкладками AJAX, предлагаемый в Toolkit. Вместо этого я изменил вкладки Pure CSS. Этот подход отлично подходит для меня и удаляет все обратные сообщения на странице. Я разрабатываю среду IE, поэтому CSS, возможно, нужно будет tweeked для корректного отображения в других браузерах. Я знаю, что 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