Q. 세 개의 RadioButton이 있다. 원하는 노래제목을 클릭하면, 해당 div의 내용(노래가사)이 출력된다.
↓ ↓ 원하는 출력결과 ↓ ↓
1. RadioButton에는 선택값을 구분하기 위해서, 각각 고유한 id를 지정한다.
2. onClick를 사용하여 자바스크립트의 contentsView를 호출한다.
<asp:RadioButton ID="card" runat="server" GroupName="orderGroup" Checked="true" onclick="javascript:contentsView(card);"/> 여전히 아름다운지
<asp:RadioButton ID="cardDiv" runat="server" GroupName="orderGroup" onclick="javascript:contentsView(cardDiv);"/> 사랑한다는 흔한 말
<asp:RadioButton ID="bank" runat="server" GroupName="orderGroup" onclick="javascript:contentsView(bank);"/> 내가 너의 곁에 잠시 살았다는걸
<asp:RadioButton ID="cardDiv" runat="server" GroupName="orderGroup" onclick="javascript:contentsView(cardDiv);"/> 사랑한다는 흔한 말
<asp:RadioButton ID="bank" runat="server" GroupName="orderGroup" onclick="javascript:contentsView(bank);"/> 내가 너의 곁에 잠시 살았다는걸
3. 해당 RadioButton에 따라 출력 될 div를 코딩한다. div에도 마찬가지로 각각 고유한 id를 지정한다.
세 개의 div중 처음 페이지가 load 됐을 때 보여줄 div만 display를 'block'로 설정하고
'block'으로 지정한 div를 제외한 나머지 div는 display가 none으로 설정 돼있어야 한다.
<div id="Song1">
<table>
<tr>
<th>김연우♬ 여전히 아름다운지</th>
</tr>
<tr>
<td>
첨엔 혼자라는게 편했지 자유로운 선택과 시간에 너의 기억을 지운 듯 했어<br />
정말 난 그런줄로 믿었어 하지만 말야 이른 아침 혼자 눈을 뜰때 내 곁에<br />
니가 없다는 사실을 알게 될 때면 나도 모를 눈물이 흘러~~~
</td>
</tr>
</table>
</div>
<tr>
<th>김연우♬ 여전히 아름다운지</th>
</tr>
<tr>
<td>
첨엔 혼자라는게 편했지 자유로운 선택과 시간에 너의 기억을 지운 듯 했어<br />
정말 난 그런줄로 믿었어 하지만 말야 이른 아침 혼자 눈을 뜰때 내 곁에<br />
니가 없다는 사실을 알게 될 때면 나도 모를 눈물이 흘러~~~
</td>
</tr>
</table>
</div>
<div id="Song2">
<table>
<tr>
<th>김연우♬ 사랑한다는 흔한 말</th>
</tr>
<tr>
<td>
끝이란 헤어짐이 내겐 낯설어 아직까지 난 믿을수 없는데 마치 거짓말인 것처럼<br />
힘들단 내색조차 너는 없어서 아무것도 난 몰랐어 한동안 그저 좋은 줄만 알았어<br />
하루만 나 지우면 되니 잠시만 나 네 눈 앞에서 멀어지면 토라진 맘 풀릴 수 있니<br />
</td>
</tr>
</table>
</div>
<tr>
<th>김연우♬ 사랑한다는 흔한 말</th>
</tr>
<tr>
<td>
끝이란 헤어짐이 내겐 낯설어 아직까지 난 믿을수 없는데 마치 거짓말인 것처럼<br />
힘들단 내색조차 너는 없어서 아무것도 난 몰랐어 한동안 그저 좋은 줄만 알았어<br />
하루만 나 지우면 되니 잠시만 나 네 눈 앞에서 멀어지면 토라진 맘 풀릴 수 있니<br />
</td>
</tr>
</table>
</div>
<div id="Song3">
<table>
<tr>
<th>김연우♬ 내가 너의 곁에 잠시 살았다는걸 </th>
</tr>
<tr>
<td>
지운줄 알았어 너의 기억들을 친구들 함께 모여 술에 취한 밤 <br />
네 생각에 난 힘들곤 해 그런채 살았어 늘 혼자였잖아 한때는 널 구원이라<br />
믿었었어 멀어지기 전엔 <br />
</td>
</tr>
</table>
</div>
<table>
<tr>
<th>김연우♬ 내가 너의 곁에 잠시 살았다는걸 </th>
</tr>
<tr>
<td>
지운줄 알았어 너의 기억들을 친구들 함께 모여 술에 취한 밤 <br />
네 생각에 난 힘들곤 해 그런채 살았어 늘 혼자였잖아 한때는 널 구원이라<br />
믿었었어 멀어지기 전엔 <br />
</td>
</tr>
</table>
</div>
4. 자바스크립트 함수(호출 할 때 넘어오는 값으로 구분하여 display를 설정한다.)
함수에서 jquery를 사용하였기 때문에, 함수를 사용하기 전에 jquery를 사용하겠다고 꼭 먼저 선언한다.
<script language="javascript" type="text/javascript">
function contentsView(objVlaue) {
if (objVlaue.value == 'bank') {
$('#cardPnl').css('display', 'none');
$('#cardDivPnl').css('display', 'none'); //display 'none'은= div가 보이지않는!
$('#bankPnl').css('display', 'block'); // display 'block'은 = div가 보이는!
return false;
}
if (objVlaue.value == 'bank') {
$('#cardPnl').css('display', 'none');
$('#cardDivPnl').css('display', 'none'); //display 'none'은= div가 보이지않는!
$('#bankPnl').css('display', 'block'); // display 'block'은 = div가 보이는!
return false;
}
if (objVlaue.value == 'card') {
$('#cardDivPnl').css('display', 'none');
$('#bankPnl').css('display', 'none');
$('#cardPnl').css('display', 'block');
return false;
}
$('#cardDivPnl').css('display', 'none');
$('#bankPnl').css('display', 'none');
$('#cardPnl').css('display', 'block');
return false;
}
if (objVlaue.value == 'cardDiv') {
$('#cardPnl').css('display', 'none');
$('#bankPnl').css('display', 'none');
$('#cardDivPnl').css('display', 'block');
return false;
}
}
$('#cardPnl').css('display', 'none');
$('#bankPnl').css('display', 'none');
$('#cardDivPnl').css('display', 'block');
return false;
}
}
</script>
'JavaScript & jQuery' 카테고리의 다른 글
jquery .hover (마우스오버와 마우스아웃) (0) | 2011.07.26 |
---|---|
자바스크립트 주민등록번호 (0) | 2011.07.22 |
$.getJSON / $.each / .push (0) | 2011.06.20 |
자바스크립트 공백제거 (0) | 2011.06.07 |
javascript- RadioButton 선택여부 확인하기 (0) | 2011.04.01 |