라디오 텝

radio, tab, jquery, change

by Park Mino

HTML

<div class="usemapDiv vote_area">
			<div class="sbox" id="votelist">
				<ol>
					<li><label for="radioCheck1">1</label><input type="radio" name="voteName" id="radioCheck1" class="radio" /></li>
					<li><label for="radioCheck2">2</label><input type="radio" name="voteName" id="radioCheck2" class="radio" /></li>
					<li><label for="radioCheck3">3</label><input type="radio" name="voteName" id="radioCheck3" class="radio" /></li>
					<li><label for="radioCheck4">4</label><input type="radio" name="voteName" id="radioCheck4" class="radio" /></li>
				</ol>
			</div>
			<div class="tabBox radioCheck1 on">1</div>
			<div class="tabBox radioCheck2">2</div>
			<div class="tabBox radioCheck3">3</div>
			<div class="tabBox radioCheck4">4</div>
			
		</div>

CSS

ol, li{list-style:none}
ol:after{content:'';display:block;clear:both;}
li{float:left;width:25%;height:50px;}
.vote_area .tabBox{display:none;}
.vote_area .tabBox.on{display:block;}

JavaScript

$('#votelist li').on('click', function(){
       $(":radio[name='voteName']").change(function(){
           var _tabBox = $('.tabBox');
           var _voteName = $(this).prop("checked",true).attr("id");
           _tabBox.removeClass('on');
           $('.'+_voteName).addClass('on');
       });
    });