반응형
폰트 굵기 바꾸기
<!DOCTYPE html>
<html>
<head>
<title>Travel Website</title>
<meta charset="utf-8">
<link rel="stylesheet" href="Styles.css">
</head>
<body>
<img id="logo" src="logo.png" width="165" height="58">
<div id="menu">
<a id="home" onclick="clickHome();">Home</a>
<a id="seoul" onclick="clickSeoul();">Seoul</a>
<a id="tokyo" onclick="clickTokyo();">Tokyo</a>
<a id="paris" onclick="clickParis();">Paris</a>
</div>
<img id="photo" src="home.png" width="90%">
<script>
// 사진을 바꿔주는 함수
function clickHome() {
document.getElementById('photo').src = 'home.png';
document.getElementById('home').style.fontWeight = 'bold';
document.getElementById('seoul').style.fontWeight = 'normal';
document.getElementById('tokyo').style.fontWeight = 'normal';
document.getElementById('paris').style.fontWeight = 'normal';
}
function clickSeoul() {
document.getElementById('photo').src = 'seoul.png';
document.getElementById('seoul').style.fontWeight = 'bold';
document.getElementById('home').style.fontWeight = 'normal';
document.getElementById('tokyo').style.fontWeight = 'normal';
document.getElementById('paris').style.fontWeight = 'normal';
}
function clickTokyo() {
document.getElementById('photo').src = 'tokyo.png';
document.getElementById('tokyo').style.fontWeight = 'bold';
document.getElementById('seoul').style.fontWeight = 'normal';
document.getElementById('home').style.fontWeight = 'normal';
document.getElementById('paris').style.fontWeight = 'normal';
}
function clickParis() {
document.getElementById('photo').src = 'paris.png';
document.getElementById('paris').style.fontWeight = 'bold';
document.getElementById('seoul').style.fontWeight = 'normal';
document.getElementById('tokyo').style.fontWeight = 'normal';
document.getElementById('home').style.fontWeight = 'normal';
}
</script>
</body>
</html>
#logo {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 80px;
}
#menu {
text-align: center;
margin-top: 60px;
margin-bottom: 60px;
}
#menu a {
margin-left: 10px;
margin-right: 10px;
font-size: 16px;
color: #58595b;
text-decoration: none;
font-family: Helvetica, Arial, sans-serif;
}
#menu a:first-child {
font-weight: bold;
}
#photo {
display: block;
margin-left: auto;
margin-right: auto;
}본 내용은 Codeit의 'jQuery' 강의를
참고하여 작성한 내용입니다.
반응형
'Front-end > jQuery' 카테고리의 다른 글
| [jQuery 시작하기] 02. 과제로 워밍업 (0) | 2021.02.17 |
|---|---|
| [jQuery 시작하기] 02. 과제로 워밍업 (0) | 2021.02.17 |
| [jQuery 시작하기] 02. 과제로 워밍업 (0) | 2021.02.17 |
| [jQuery 시작하기] 02. 과제로 워밍업 (0) | 2021.02.17 |
| [jQuery 시작하기] 01. HTML, CSS와의 콜라보레이션 (0) | 2021.02.16 |