CSS를 사용하여 탭 패널을 만드는 방법

CSS (AJAX를 사용하지 않음)를 사용하여 탭 패널을 만들고 싶습니다. 아무도 도와 줄 수 있습니까? 아약스 컨트롤을 사용하여CSS를 사용하여 탭 패널을 만드는 방법

<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에서 원하는 ...

출처

2014-01-21 Sumanta

이 도움이 될 - http://www.adtrak.co.uk/blog/responsive-css3-tabs/을 당신은 당신의 이전 답을 edite 수 – MusicLovingIndianGirl

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

출처

2014-01-21 11:58:02 sona

, 두 배로 할 필요가 없습니다 답변 게시 – Hoh

내가 당신에게 CSS, HTML을주고, 코드 숨김됩니다. 나는 Toolkit에서 제공되는 AJAX 탭 컨트롤을 사용하지 않았다. 대신 Pure CSS 탭을 수정했습니다. 이 접근 방식은 나를 위해 잘 작동하고 페이지에서 깜박이는 모든 포스트 백을 제거합니다. IE 환경을 위해 개발 중이므로 다른 브라우저에서 CSS를 올바르게 표시하려면 CSS를 tweeked해야 할 수도 있습니다. 나는 파이어 폭스가 잘 작동한다는 것을 알고 있지만 패딩은 약간 떨어져있다. 나는 이것이 당신의 페이지에 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의 아약스 컨트롤을 처리하기 위해 이미 설치해야합니다)이이 약

<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

출처

2014-01-21 11:47:35 Hoh

CSS를 사용하여 탭 패널을 만드는 방법

답변

관련 문제