jquery Load method를 활용하여 로드하기
main.html과 sub.html 셋업
header {
background-color: #000;
text-align: center;
padding: 15px 0;
}
header a {
color: #fff;
padding: 0 20px;
}
main {
height: 50vh;
font-size: 3rem;
display: flex;
align-items: center;
justify-content: center;
}
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<link rel="stylesheet" href="./index.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>'./index.js'</script>
</head>
<body>
<header>
<a href="./main.html">HOME</a>
<a href="./sub1.html">SUB-01</a>
<a href="./sub2.html">SUB-02</a>
</header>
<main>
<!--main.html-->
</main>
</body>
</html>
<!--main.html-->
<div> jquery Load Method 활용 </div><div>
<!--sub1.html-->
sub1 페이지입니다.
</div>
js 파일에서 로드를 거는 방식
$('main').load('./main.html')
index.html에서 js 불러올 때 다 읽고 불러오도록 defer 시킴
<script defer src ='./index.js'></script>
헤더를 고정 시키기
<!--header.html-->
<header>
<a href="./index.html">HOME</a>
<a href="./sub1.html">SUB-01</a>
<a href="./sub2.html">SUB-02</a>
</header>
js 파일
$('body').prepend('<header></header>')
$('header').load('./header.html a')
모든 페이지를 한 페이지에서 관리하면서 장단점이 생김.
- 헤더에 마우스를 올렸을 때 밑으로 내려오는 기능이 가능할 것인가 ?
css 호버 같은 기능 구현
$('body').prepend('<header></header>')
$('header').load('./header.html a', nav)
function nav(){
$('header a').on('mouseenter', function(){
$('header a').css('color', 'white');
$(this).css('color', 'yellow');
})
}
상단의 url 그냥 가져오기
console.log(location.href);
마우스를 움직이다가 뗐을 때 해당 페이지로 가서 불이 들어오도록 구현
let url = location.href;
let num = 0;
if (url.match("index")) {
num = 0;
} else if (url.match("sub1")) {
num = 1;
} else {
num = 2;
}
function nav() {
$("header a").on("mouseenter", function () {
$("header a").css("color", "white");
$(this).css("color", "yellow");
});
$('header').on('mouseleave', function(){
$("header a")
.css("color", "white")
.eq(num).css('color', 'yellow');
})
}
반응형
'교육 > Javascript&Jquery' 카테고리의 다른 글
| 자바스크립트 + 제이쿼리 입문 day 12 (0) | 2023.01.18 |
|---|---|
| 자바스크립트 + 제이쿼리 입문 day 11 (0) | 2023.01.16 |
| 자바스크립트 + 제이쿼리 입문 day 9 (0) | 2023.01.09 |
| 자바스크립트 + 제이쿼리 입문 day 8 (0) | 2023.01.06 |
| 자바스크립트 + 제이쿼리 입문 day 7 (0) | 2023.01.04 |
