我试图制作 netflix(旧版本)的克隆,当我尝试使用 javascript 在部分之间切换时遇到了一些问题,我想让类“被选中”循环通过我的部分标签,但我我无法做到这一点。 'is-selected' 在“a”标签中循环但不在“section”标签中循环。
HTML
<div id="features">
<nav>
<div class="center columns size-80">
<a href="#" class="column is-selected" data-id="cancelanytime">
<img src="./images/cancel-close-exit-out-svgrepo-com.svg" alt="Cancel anytime">
<h2>
No Commitments
<br />
Cancel online anytime
</h2>
</a>
<a href="#" class="column" data-id="watchanywhere">
<img src="./images/phone-tablet-and-laptop-svgrepo-com.svg" alt="Watch anywhere">
<h2>
Watch Anywhere
</h2>
</a>
<a href="#" class="column" data-id="pickprice">
<img src="./images/pricetag2-svgrepo-com.svg" alt="pick price">
<h2>
Pick Your Price
</h2>
</a>
</div>
<article>
<section class="is-selected" data-id="cancelanytime">
About Feature 1
</section>
<section data-id="watchanywhere">
About Feature 2
</section>
<section data-id="pickprice">
About Feature 3
</section>
</article>
</nav>
</div>
CSS
#features > nav a.is-selected{
border-bottom: 5px solid #e50914;
color: white;
}
#features > nav > article > section{
display: none;
padding: 40px 0;
}
#features > nav > article > section.is-selected{
display: block;
}
Javascript
$(function(){
var tabs = $('#features > nav a');
var tabsContent = $('#feature > nav > article > section');
tabs.click(function(e){
e.preventDefault();
var that = $(this);
tabs.removeClass('is-selected');
that.addClass('is-selected');
tabsContent.removeClass('is-selected');
tabsContent.filter((i, tab) => $(tab).data('id') === that.data('id'))
.addClass('is-selected');
});
});