테스트 사이트 - 개발 중인 베타 버전입니다

활성화된 버튼별로 원하는 줄만 출력하려고 합니다.. 채택완료

arkk 4년 전 조회 3,391

 

위와 같이 1~3번 버튼이 있고 제일 처음에는 1~3 버튼만 보이고

1번 버튼을 누르면 1번에 포함된 2개 줄이 나오고

 

2번 버튼을 누르면 1번 줄은 숨겨지고 2번 줄이 나오게 하려면 어떻게 해야될 까요..

 

tr td가 여러개라 어떻게 해야될지... 도와주세요

댓글을 작성하려면 로그인이 필요합니다.

답변 2개

채택된 답변
+20 포인트
식쏭
4년 전

</p>

<p>

<table border=1>

<tr class='c1' style='display:none'>

    <td>1-1-1</td><td>1-1-2</td><td>1-1-3</td>

</tr>

<tr class='c1' style='display:none'>

    <td>1-2-1</td><td>1-2-2</td><td>1-2-3</td>

</tr>

<tr class='c2' style='display:none'>

    <td>2-1-1</td><td>2-1-2</td><td>2-1-3</td>

</tr> <tr class='c2' style='display:none'>

    <td>2-2-1</td><td>2-2-2</td><td>2-2-3</td>

</tr>

<tr class='c3' style='display:none'>

    <td>3-1-1</td><td>3-1-2</td><td>3-1-3</td>

</tr> <tr class='c3' style='display:none'>

    <td>3-2-1</td><td>3-2-2</td><td>3-2-3</td>

</tr>

</table>

<button class='btn' showTr='c1'>버튼1</button>

<button class='btn' showTr='c2'>버튼2</button>

<button class='btn' showTr='c3'>버튼3</button></p>

<p><script></p>

<p>$(".btn").click(function(){

    

  var showTr = $(this).attr("showTr");

  $('tr').hide();

  $("."+showTr).show(); // 선택된것만 보이게

});</p>

<p></script></p>

<p>

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

4년 전

css나 js로 탭메뉴로 하시면 되실것 같은데요~
젤 처음 줄들은 display:none으로 모두 숨겨놓으시구요~

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인