jQuery attr() 속성변경
2021. 12. 7. 12:48ㆍStudy/jQuery
attr()
＊ 태그의 속성 변경 메소드
$('선택자').attr('속성', '값');
＊ 아래 탭 예제는 구린방법이라 쓰지 않는다
＊ 아래 탭 예제는 구린방법이라 쓰지 않는다
＊ 아래 탭 예제는 구린방법이라 쓰지 않는다
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Q&A</title>
<style>
*{margin: 0; padding: 0;}
body{font-family:'Spoqa Han Sans Neo'; font-size: 16px; color:#333; line-height:1.6;}
a{color:inherit; text-decoration:none;}
img{vertical-align:top;}
#tabMenu ul{ list-style: none;overflow:hidden}
#tabMenu ul li{float:left;}
#tabMenu div{width: 400px; height: 200px; border:1px solid #ccc; display:none;}
</style>
<script src="./js/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$('.menu1 img').attr('src', 'images/tab1on.jpg');
$('#tabMenu div:eq(0)').css('display','block');
$('.menu1').click(function(){
$('.menu1 img').attr('src', 'images/tab1on.jpg');
$('.menu2 img').attr('src', 'images/tab2.jpg');
$('.menu3 img').attr('src', 'images/tab3.jpg');
$('#tabMenu div:eq(0)').css('display','block');
$('#tabMenu div:eq(1)').css('display','none');
$('#tabMenu div:eq(2)').css('display','none');
});
$('.menu2').click(function(){
$('.menu1 img').attr('src', 'images/tab1.jpg');
$('.menu2 img').attr('src', 'images/tab2on.jpg');
$('.menu3 img').attr('src', 'images/tab3.jpg');
$('#tabMenu div:eq(0)').css('display','none');
$('#tabMenu div:eq(1)').css('display','block');
$('#tabMenu div:eq(2)').css('display','none');
});
$('.menu3').click(function(){
$('.menu1 img').attr('src', 'images/tab1.jpg');
$('.menu2 img').attr('src', 'images/tab2.jpg');
$('.menu3 img').attr('src', 'images/tab3on.jpg');
$('#tabMenu div:eq(0)').css('display','none');
$('#tabMenu div:eq(1)').css('display','none');
$('#tabMenu div:eq(2)').css('display','block');
});
});
</script>
</head>
<body>
<div id="tabMenu">
<ul>
<li><a class="menu1" href="#" ><img src="images/tab1.jpg" alt="서적" /></a></li>
<li><a class="menu2" href="#" ><img src="images/tab2.jpg" alt="인쇄" /></a></li>
<li><a class="menu3" href="#" ><img src="images/tab3.jpg" alt="잡지" /></a></li>
</ul>
<div>서적 내용 컨텐츠</div>
<div>인쇄 내용 컨텐츠</div>
<div>잡지 내용 컨텐츠</div>
</div>
</body>
</html>
'Study > jQuery' 카테고리의 다른 글
| jQuery EVENT Bubbling , this (0) | 2021.12.07 |
|---|---|
| jQuery toogle 더보기 (0) | 2021.12.07 |
| jQuery toggle(), hover() (0) | 2021.12.07 |
| jQuery 다중 이벤트 (0) | 2021.12.07 |
| jQuery EVENT bind(), on(), click() (0) | 2021.12.07 |
