프로젝트
버튼 클릭시 해당 텍스트 보이게하기
by 리양
2021. 8. 13.
<body>
<nav>
<ul>
<li class="button"><a href="#">버튼1</a></li>
<li class="button"><a href="">버튼2</a></li>
<li class="button"><a href="">버튼3</a></li>
</ul>
</nav>
<div class="container">
<div class="box">
<div class="text">스마트문화앱 ui 디자인</div>
<div class="text">능력단위가 바뀌었으니 꼭 확인하세요</div>
<div class="text">문제해결 시나리오</div>
</div>
</div>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
// 첫화면에 아무 글자도 보이지 않게 한다.
$("[class^=text]").hide();
$(".button").on("click", function(){
// 버튼 클릭시 a태그 때문에 자꾸 새로고침되는걸 막는다.
event.preventDefault()
// 모든 .text를 숨긴다
$("[class^=text]").hide();
// 클릭한 버튼 인덱스번호와 똑같은 인덱스번호를 가진 text를 반환한다.
$("[class^=text]").eq($(this).index()).show();
});
</script>
