你只需要將這個(gè)函數(shù)添加到你的js項(xiàng)目文件中
function openTab(tabName) {
var i;
var x = document.getElementsByClassName("content-media");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
document.getElementById(tabName).style.display = "block";
}
openTab('movies-highlights')
此函數(shù)在調(diào)用時(shí)隱藏所有選項(xiàng)卡，使用id屬性僅顯示需要的選項(xiàng)卡
然后您將導(dǎo)航元素從鏈接更改a為常規(guī)按鈕button，并向它們添加一些新樣式（因?yàn)樗鼈兙哂胁煌哪J(rèn)樣式，然后鏈接具有）
然后確保所有的 id 都是唯一的，以便顯示特定的選項(xiàng)卡。
然后為每個(gè)導(dǎo)航按鈕添加以下屬性：data-open="movies-highlights". 作為參數(shù)，您指定要顯示的元素的 id。
你得到這個(gè)：
function openTab(tabName) {
var i;
var x = document.getElementsByClassName("content-media");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
document.getElementById(tabName).style.display = "block";
}
openTab('movies-highlights')
// the following is used to make tabs active when click on them
let navButtons = document.querySelectorAll('button[data-open]')
navButtons.forEach((elem) => {
elem.addEventListener("click", (e) => {
for (var i = 0; i < navButtons.length; i++) {
navButtons[i].classList.remove('active')
}
e.target.classList.add('active')
openTab(e.target.getAttribute('data-open'))
})
})
html {
scroll-behavior: smooth;
}
body {
background-color: #222222;
font-family: 'Montserrat', sans-serif;
margin: 0;
margin-top: 4em;
padding: 0;
}
ul.top {
display: block;
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
background-color: #1d1d1d;
font-weight: bold;
text-align: center;
cursor: default;
user-select: none;
font-size: 16px;
opacity: 0.98;
position: fixed;
top: 0;
z-index: 100;
}
li.li-top {
display: inline-block;
}
li.li-top a {
display: block;
color: #ffffff;
text-decoration: none;
line-height: 3em;
padding-left: 3em;
padding-right: 3em;
}
li.li-top a:hover {
background-color: #1a1a1a;
transition: all ease-in-out 250ms;
color: #dbdbdb;
}
li.li-top-active {
display: inline-block;
background-color: #ffffff;
}
li.li-top-active a {
display: block;
color: #000000;
text-decoration: none;
line-height: 3em;
padding-left: 3em;
padding-right: 3em;
}
li.li-top-active a:hover {
background-color: #dbdbdb;
transition: all ease-in-out 250ms;
}
.media-div {
padding-bottom: 1.5em;
user-select: none;
}
.media-title {
text-align: center;
line-height: 3em;
margin-bottom: 2.5em;
font-size: 20px;
}
.search-box {
position: absolute;
background-color: #ffffff;
left: 50%;
transform: translate(-50%,-50%);
height: 3em;
border-radius: 3em;
border-style: solid;
border-color: #000000;
padding: 0;
margin-top: -2.2em;
}
.search-btn {
color: #000000;
float: right;
width: 3em;
height: 3em;
border-radius: 50%;
background-color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
position: static;
}
.search-txt {
border: none;
background: none;
outline: none;
padding: 0;
padding-left: 1em;
color: #000000;
font-size: 17px;
transition: all ease-in-out 250ms;
line-height: 3em;
width: 25em;
float: left;
}
ul.media {
list-style-type: none;
margin: 0 auto;
padding: 0;
width: 75em;
background-color: #ffffff;
font-weight: bold;
text-align: center;
cursor: default;
user-select: none;
border: none;
font-size: 16px;
}
li.li-media {
display: inline-block;
}
li.li-media button {
display: block;
color: #000000;
text-decoration: none;
line-height: 3em;
padding-left: 3em;
padding-right: 3em;
border: 0;
outline: none;
font-family: 'Montserrat', sans-serif;
cursor: pointer;
font-size: 15px;
transition: all 200ms ease-in-out;
}
li.li-media button:hover {
background: #dbdbdb!important;
transition: all ease-in-out 250ms;
}
li.li-media button:active {
background-color: #dbdbdb;
}
// styles for active nav item
button[data-open].active {
background-color: #999999;
}
button[data-open].active:hover {
background-color: #999999 !important;
}
.content-media {
width: 75em;
background-color: #dbdbdb;
margin: 0 auto;
margin-bottom: 1em;
}
.content-media-padding {
padding-bottom: 1em;
display: inline-block;
text-align: center;
}
.img {
height: 18em;
width: 12em;
}
.img-container {
height: 18em;
width: 12em;
padding: 1em;
transition: all ease-in-out 100ms;
display: inline-block;
}
.img-container:hover {
transform: scale(1.02);
cursor: pointer;
}
.content-title {
width: 12em;
height: 2.5em;
background-color: #1d1d1d;
color: #ffffff;
text-align: center;
line-height: 2.5em;
margin-top: -0.3em;
cursor: pointer;
transition: all ease-in-out 250ms;
text-overflow: ellipsis;
overflow: hidden;
display: inline-block;
}
.content-title-padding {
margin-left: 1em;
margin-right: 1em;
}
figcaption a {
text-decoration: none;
color: #ffffff;
}
figcaption a:hover {
text-decoration: none;
color: #dbdbdb;
}
.content-title:hover {
background-color: #1a1a1a;
}
.footer-title {
user-select: none;
color: #ffffff;
text-align: center;
line-height: 3em;
width: 5em;
font-size: 20px;
margin-bottom: -6em;
text-decoration: none;
display: inline-block;
}
.footer-txt {
user-select: none;
color: #ffffff;
text-align: center;
line-height: 1em;
margin-bottom: -5em;
font-size: 16px;
font-weight: normal;
text-decoration: none;
display: inline-block;
}
.footer {
user-select: none;
background-color: #1d1d1d;
width: 100%;
text-align: center;
padding-bottom: 3em;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Site</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/74494548e4.js" crossorigin="anonymous"></script>
</head>
<body>
<ul class="top">
<li class="li-top-active"><a href="#">Home</a></li>
<li class="li-top"><a href="#">Movies</a></li>
<li class="li-top"><a href="#">Series</a></li>
<li class="li-top"><a href="#">Animes</a></li>
<li class="li-top"><a href="#">Help</a></li>
</ul>
<div class="media-div">
<ul class="media">
<h1 class="media-title">Movies</h1>
<div class="search-box">
<input class="search-txt" type="text" placeholder="Search here a movie">
<a href="#" class="search-btn">
<i class="fas fa-search"></i>
</a>
</div>
<li class="li-media"><button data-open="movies-highlights" class="active">Highlights</button></li>
<li class="li-media"><button data-open="movies-seen">Most seen</button></li>
<li class="li-media"><button data-open="movies-recent">Most recent added</button></li>
<li class="li-media"><button data-open="movies-rated">Most rated</button></li>
</ul>
<div class="content-media" id="movies-highlights">
<div class="content-media-padding"
<a>
<div class="img-container" title="Highlights">
<img src="https://mischalke04.files.wordpress.com/2010/06/the-highlights-poster.jpg" class="img">
<figcaption class="content-title">
<div class="content-title-padding"
<a href="#">Highlights</a>
</div>
</figcaption>
</div>
</a>
</div>
</div>
<div class="content-media" id="movies-seen">
<div class="content-media-padding"
<a>
<div class="img-container" title="Most seen">
<img src="https://i.pinimg.com/originals/31/22/ea/3122ea91ff43732c50c9fa8c5761271f.jpg" class="img">
<figcaption class="content-title">
<div class="content-title-padding"
<a href="#">Most seen</a>
</div>
</figcaption>
</div>
</a>
</div>
</div>
<div class="content-media" id="movies-recent">
<div class="content-media-padding"
<a>
<div class="img-container" title="Most recent added">
<img src="https://i.pinimg.com/originals/6e/66/03/6e6603be280359c8a62e0f2f498242ea.jpg" class="img">
<figcaption class="content-title">
<div class="content-title-padding"
<a href="#">Most recent added</a>
</div>
</figcaption>
</div>
</a>
</div>
</div>
<div class="content-media" id="movies-rated">
<div class="content-media-padding"
<a>
<div class="img-container" title="Most rated">
<img src="https://d13ezvd6yrslxm.cloudfront.net/wp/wp-content/images/TFINYR-Poster-700x999.jpg" class="img">
<figcaption class="content-title">
<div class="content-title-padding"
<a href="#">Most rated</a>
</div>
</figcaption>
</div>
</a>
</div>
</div>
</div>
<div class="footer">
<h1 class="footer-title">Help</h1>
<br>
<a href="#"><h1 class="footer-txt">Contact</h1></a>
<br>
<a href="#"><h1 class="footer-txt">Terms of service</h1></a>
</div>
</body>
</html>
