HTML & CSS 연습/coza
coza_tab.js
별초롱언니
2025. 4. 16. 17:38
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/705381df09.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="../../../CSS/make/coza.css">
<title>coza</title>
</head>
<body>
<header>
<div class="top-bar">
<div class="container">
<div class="top-left">Free shipping for standard order over $100</div>
<ul class="top-right">
<li><a href="#">Help & FAQs</a></li>
<li><a href="#">My Account</a></li>
<li><a href="#">EN</a></li>
<li><a href="#">USD</a></li>
</ul>
</div>
</div>
<div class="wrap-menu">
<div class="wrap-top-left"><a href=""><img src="img/logo.png"></a>
<nav>
<ul class="wrap-top-nav">
<li><a class="homecolor" href="#">Home</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
<div>
<a class="top-icon" href="#"><img src="icon/search.svg" alt="search" width="20px"></a>
<a class="top-icon" href="#"><img src="icon/cart.svg" alt="search" width="20px"></a>
<a class="top-icon" href="#"><img src="icon/heart.svg" alt="search" width="20px"></a>
</div>
</div>
</header>
<!-- main -->
<section class="slide">
<div class="text-box">
<div>
<p>Men New-Season</p>
</div>
<div>
<h1>JACKETS & COATS</h1>
</div>
<a href="#">SHOP NOW</a>
</div>
</section>
<section id="category" class="container">
<div>
<a class="categoryimg1" href="#">
<h1>Women</h1>
<p><small>Spring 2025</small></p>
</a>
</div>
<div>
<a class="categoryimg2" href="#">
<div class="category-text">
<h2>Men</h2>
<p><small>Spring 2025</small></p>
</div>
</a>
</div>
<div>
<a class="categoryimg3" href="#">
<h2>Accessories</h2>
<p><small>New Trend</small></p>
</a>
</div>
</section>
<section class="view-name">
<h2>PRODUCT OVERVIEW</h2>
<div class="view-nav">
<!-- 탭메뉴 -->
<ul class="view-nav-left" id="tab">
<li id="all">All Products</li>
<li id="women">Women</li>
<li id="men">Men</li>
<li id="bag">Bag</li>
<li id="shoes">Shoes</li>
<li id="watches">Watches</li>
</ul>
<div class="view-nav-right">
<a href="#"><i class="fa-solid fa-filter"></i>Filter</a>
<a href="#"><i class="fa-solid fa-magnifying-glass"></i>Search</a>
</div>
</div>
</section>
<section class="overview">
<div class="overview-img all women">
<img src="img/women1.jpg" width="300px">
<div>
<span>Esprit Ruffle Shirt</span>
<span><i class="fa-solid fa-heart"></i></span>
</div>
<div>$16.64</div>
</div>
<div class="overview-img all women">
<div>
<img src="img/women2.jpg" width="300px">
</div>
<div>
<span>Horschel supply</span>
<span><i class="fa-solid fa-heart"></i></span>
</div>
<div>$35.31</div>
</div>
<div class="overview-img all men">
<div>
<img src="img/Men1.jpg" width="300px">
</div>
<div>
<span>Esprit Ruffle Shirt</span>
<span><i class="fa-solid fa-heart"></i></span>
</div>
<div>$25.50</div>
</div>
<div class="overview-img all women">
<div>
<img src="img/women3.jpg" width="300px">
</div>
<div>
<span>Classic Trench coat</span>
<span><i class="fa-solid fa-heart"></i></span>
</div>
<div>$75.00</div>
</div>
<div class="overview-img all women">
<div>
<img src="img/women4.jpg" width="300px">
</div>
<div>
<span>Front Pocket Jumper</span>
<span><i class="fa-solid fa-heart"></i></span>
</div>
<div>$34.75</div>
</div>
<div class="overview-img all watches">
<div>
<img src="img/watches1.jpg" width="300px">
</div>
<div>
<span>Vintage Inspired Classic</span>
<span><i class="fa-solid fa-heart"></i></span>
</div>
<div>$93.20</div>
</div>
<div class="overview-img all women">
<div>
<img src="img/women5.jpg" width="300px">
</div>
<div>
<span>Shirt in Stretch Cotton</span>
<span<i class="fa-solid fa-heart"></i></span>
</div>
<div>$52.66</div>
</div>
<div class="overview-img all women">
<div>
<img src="img/women6.jpg" width="300px">
</div>
<div>
<span>Pieces Metallic Printed</span>
<span><i class="fa-solid fa-heart"></i></span>
</div>
<div>$18.96</div>
</div>
<div class="overview-img all shoes">
<div>
<img src="img/shoes.jpg" width="300px">
</div>
<div>
<span>Converse All Star Hi Plimsolls</span>
<span><i class="fa-solid fa-heart"></i></span>
</div>
<div>$75.00</div>
</div>
<div class="overview-img all women">
<div>
<img src="img/women7.jpg" width="300px">
</div>
<div>
<span>Femme T-Shirt in Stripe</span>
<span><i class="fa-solid fa-heart"></i></span>
</div>
<div>$25.85</div>
</div>
<div>
<div class="overview-img all men">
<img src="img/Men2.jpg" width="300px">
<div>
<span>Herschel supply</span>
<span><i class="fa-solid fa-heart"></i></span>
</div>
<div>$63.16</div>
</div>
</div>
<div>
<div class="overview-img all men">
<img src="img/Men3.jpg" width="300px">
<div>
<span>Herschel supply</span>
<span><i class="fa-solid fa-heart"></i></span>
</div>
<div>$63.15</div>
</div>
</div>
<div class="overview-img all women">
<div>
<img src="img/women8.jpg" width="300px">
</div>
<div>
<span>T-shirt with Sleeve</span>
<span><i class="fa-solid fa-heart"></i></span>
</div>
<div>$18.49</div>
</div>
<div class="overview-img all women">
<div>
<img src="img/women9.jpg" width="300px">
</div>
<div>
<span>Pretty Little Thing</span>
<span><i class="fa-solid fa-heart"></i></span>
</div>
<div>$54.79</div>
</div>
<div class="overview-img all watches">
<div>
<img src="img/watches2.jpg" width="300px">
</div>
<div>
<span>Mini silver Mesh Watch</span>
<span><i class="fa-solid fa-heart"></i></span>
</div>
<div>$86.85</div>
</div>
<div class="overview-img all women">
<div>
<img src="img/women10.jpg" width="300px">
</div>
<div>
<span>Square Neck Back</span>
<span><i class="fa-solid fa-heart"></i></span>
</div>
<div>$29.64</div>
</div>
</section>
<section class="foot">
<div class="foot-button">
<a href="#">LOAD MORE</a>
</div>
</section>
<footer>
<section class="category">
<div class="category1">
<h4>CATEGORIES</h4>
<ul>
<li><a href="#">Women</a></li>
<li><a href="#">Men</a></li>
<li><a href="#">Shoes</a></li>
<li><a href="#">Watches</a></li>
</ul>
</div>
<div class="category2">
<h4>HELP</h4>
<ul>
<li><a href="">Track Order</a></li>
<li><a href="">Returns</a></li>
<li><a href="">Shipping</a></li>
<li><a href="">FAQs</a></li>
</ul>
</div>
<div class="category3">
<h4>GET IN TOUCH</h4>
<div>Any questions? Let us know in store at 8th <br>
floor. 379 Hudson St, New York, NY 10018 or<p></p>
call us on (+1) 96 716
6879</div>
</div>
<div class="category4">
<h4>NEWSLETTER</h4>
<form action="#">
<input type="email" name="email" placeholder="email@example.com">
<input type="submit" value="SUBSCRIBE">
</form>
</div>
</section>
<div>
<div class="visa">
<div>
<img src="img/1.png" alt="">
<img src="img/2.png" alt="">
<img src="img/3.png" alt="">
<img src="img/4.png" alt="">
<img src="img/5.png" alt="">
</div>
<div>Copyright ©2025 All rights reserved I made with ❤ by <a class="color" href="#">Colorib</a>& distributed by <a class="color" href="#">ThemeWagon</a></div>
</div>
</div>
<script src="./coza.js"></script>
</footer>
</body>
</html>.overview-img {
padding: 0 20px;
display: none;
}
.overview-img.active {
display: block;
}// Step1. 요소 선택하기
let tabs = document.querySelectorAll('.view-nav-left li');
let contents = document.querySelectorAll('.overview-img');
console.log(tabs);
console.log(contents);
// Step2. 이벤트 할당하기
for (let i = 0; i < tabs.length; i++) {
tabs[i].addEventListener('click', tabIdCalculator);
}
// Step3. 함수 선언하기
function tabIdCalculator() {
let tabId = this.id;
console.log("tabId : " + tabId);
showTabContent(tabId);
}
//클릭 이벤트가 발생한 버튼과 관련된 콘텐츠 나타내기
//this와의 관련성 : 교집합 만들어주기
function showTabContent(tabId) {
for (let i = 0; i < contents.length; i++) {
contents[i].classList.remove('active');
}
let activeContent = document.querySelectorAll("." + tabId);
console.log("tabId", tabId);
if (activeContent) {
for (let i = 0; i < activeContent.length; i++) {
activeContent[i].classList.add('active');
}
}
}