css질문 채택완료

그런데 css로 해결하시려고 질문 올리신것 같은데...

<style type="text/css">

ul{list-style:none;}

.tab_box{width:400px;}

.tab_box ul{overflow:hidden;}

.tab_box ul li{width:100px; height:30px; line-height:30px; text-align:center; float:left; margin-left:2px;}

.tab_box ul li:first-child{margin-left:0;}

.tab_box ul .tab{width:100px; height:30px; background-color:#e8e8e8; display: block; text-align: center; cursor: pointer;}

.tab_box ul .tab.current{background-color:#333; color:#fff; display: block;}

.content{width:400px; height:50px; line-height:50px; background-color:#f2f2f2; text-align: center; display:none;}

.c1{display:block;}

</style>

<div class="tab_box">

  <ul>

    <li class="tab current" data-tab="c1">1</li>

    <li class="tab" data-tab="c2">2</li>

    <li class="tab" data-tab="c3">3</li>

  </ul>

</div>

<div class="content c1">콘텐츠1</div>

<div class="content c2">콘텐츠2</div>

<div class="content c3">콘텐츠3</div>

<script src="http://code.jquery.com/jquery-latest.js">http://code.jquery.com/jquery-latest.js"></script>

<script>

$(function(){

  var tab = $('.tab_box li.tab');

  var content = $('.content');

  tab.click(function() {

    var activeTab = $(this).attr('data-tab');

    content.hide();

    tab.removeClass('current');

    $(this).addClass('current');

    $('.' + activeTab).fadeIn(800,"swing");

  })

});

</script>

css만으로는 도전은 안해봤는데 힘들거나 불가능해보이네요.

ㅇㅅㅇ? display none block 으로 보통 처리 할텐데요 그리고 전환할때 jQuery animate 써서 페이드 효과 좀 주면 될꺼 같은데 어떤걸 원하시는건가~~