两个主要的问题是，子类别没有被显示出来，根据类别的图像过滤也不起作用。
我期望过滤图像如下：所有，城市规划，建筑，和室内.当你点击他们每个人都显示子类别，它过滤图像相应.这是为了显示whcih图像属于什么，然而，我不知道为什么它不工作.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>AAC - Projects</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<script src="js/bootstrap.bundle.js"></script>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
/>
<link
rel="stylesheet"
href="path/to/font-awesome/css/font-awesome.min.css"
/>
<link
rel="apple-touch-icon"
sizes="180x180"
href="images/apple-touch-icon.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="images/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="images/favicon-16x16.png"
/>
<link rel="manifest" href="images/site.webmanifest" />
<link href="styles/stylesheet.css" rel="stylesheet" />
<link rel="stylesheet" href="styles/miragestylesheet.css" />
<link rel="stylesheet" href="styles/projects.css" />
</head>
<body>
<nav class="navbar fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="index.html">
<img
class="logo"
src="images/aac BLACK GREY 2023.png"
alt=""
srcset=""
style="width: 120px; height: 120px"
/>
</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="offcanvas"
data-bs-target="#offcanvasNavbar"
aria-controls="offcanvasNavbar"
>
<div class="hamburger">
<div class="top-bun"></div>
<div class="meat"></div>
<div class="bottom-bun"></div>
</div>
</button>
<div
class="offcanvas offcanvas-end"
tabindex="-1"
id="offcanvasNavbar"
aria-labelledby="offcanvasNavbarLabel"
>
<div class="offcanvas-header">
<button
type="button"
class="btn-close"
data-bs-dismiss="offcanvas"
aria-label="Close"
></button>
</div>
<div class="offcanvas-body">
<ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="index.html"
>Home</a
>
</li>
<li class="nav-item">
<a class="nav-link" href="projects.html">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="aboutus.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="news.html">News</a>
</li>
<li class="nav-item">
<a class="nav-link" href="career.html">Career</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="futiristic.html">Futiristic</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
<div class="about_section">
<br />
<h1>projects</h1>
<ul class="switcher">
<li data-cat=".all" class="active">All</li>
<li data-cat=".urb" id="show">
Urbanism
<ul class="switcher" id="content" style="display: none">
<li data-cat=".cityscale">City Scale</li>
<li data-cat=".residential">Residential</li>
<li data-cat=".entertainment">Entertainment</li>
</ul>
</li>
<li data-cat=".arch" id="showarch">
Architecture
<ul class="switcher" id="contentarch" style="display: none">
<li data-cat=".adminstrative">Adminstrative</li>
<li data-cat=".commercial">Commercial</li>
<li data-cat=".hospitality">Hospitality</li>
<li data-cat=".residential">Residential</li>
<li data-cat=".educational">Educational</li>
<li data-cat=".cultural">Cultural</li>
<li data-cat=".entertainment">Entertainment</li>
<li data-cat=".medical">Medical</li>
<li data-cat=".religious">Religious</li>
<li data-cat=".restoration">Restoration</li>
<li data-cat=".infrastructure">Infrastructure</li>
</ul>
</li>
<li data-cat=".int" id="showint">
Interior Design
<ul class="switcher" id="contentint" style="display: none">
<li data-cat=".residential">Residential</li>
<li data-cat=".commercial">Commercial</li>
<li data-cat=".cultural">Cultural</li>
</ul>
</li>
</ul>
</div>
<br />
<br />
<div class="container large">
<div class="gallery">
<a href="index.html"
><img
class="all urb residential"
src="images/1.jpg"
alt="Sample photo"
/></a>
<a href="index.html"
><img
class="all urb entertainment"
src="images/1.jpg"
alt="Sample photo"
/></a>
<a href="index.html"
><img
class="all urb cityscale"
src="images/12pp.jpg"
alt="Sample photo"
/></a>
</div>
</div>
<div class="small">
<main class="grid">
<a href="index.html"
><img class="all urb cityscale" src="images/1.jpg" alt="Sample photo"
/></a>
<a href="index.html"
><img
class="all urb residential"
src="images/low-angle-greyscale-building-with-modern-brutalist-architecture-sunlight.jpg"
alt="Sample photo"
/></a>
<a href="index.html"
><img
class="all urb entertainment"
src="images/1.jpg"
alt="Sample photo"
/></a>
<a href="index.html"
><img
class="all arch"
src="images/low-angle-greyscale-building-with-modern-brutalist-architecture-sunlight.jpg"
alt="Sample photo"
/></a>
</main>
</div>
<br />
<br />
<div class="footer">
<div class="row">
<div class="col-12">
<a
class="btn btn-outline-dark btn-floating m-1"
href="https://wa.me/+201111007091?text=urlencodedtext"
role="button"
><i class="fab fa-whatsapp" aria-hidden="true"></i
></a>
<a
class="btn btn-outline-dark btn-floating m-1"
href="https://www.instagram.com/aac.consultant/"
role="button"
><i class="fab fa-instagram"></i
></a>
<!-- Linkedin -->
<a
class="btn btn-outline-dark btn-floating m-1"
href="https://www.linkedin.com/company/arab-american-consultants/about/?viewAsMember=true"
role="button"
><i class="fab fa-linkedin-in"></i
></a>
<!-- Behance -->
<a
class="btn btn-outline-dark btn-floating m-1"
href="https://www.behance.net/60fd0eab"
role="button"
><i class="fa-brands fa-behance"></i
></a>
<!-- Pinterest-->
<a
class="btn btn-outline-dark btn-floating m-1"
href="https://www.pinterest.com/ArabAmericanConsultants/"
role="button"
><i class="fa-brands fa-pinterest"></i
></a>
</div>
</div>
<br />
<div class="row">
<div class="col-12" style="font-family: 'made_miragethin'">
© 2023 Arab American Consultants . All Rights Reserved.
</div>
<br />
<br />
</div>
</div>
<script src="projects.js"></script>
</body>
</html>个字符
1条答案
按热度按时间1dkrff031#
我想你忘了/错过了一些东西。所有图像的类都是URB，如果你改变它们，它会工作：
字符串