我有一个我复制的页面引导程序，但是当我尝试复制相同的部分页面时，复制的部分页面没有执行这些类。
我做错了什么？
以下是工作代码：
<section id="work" class="page-section page">
<div class="container">
<div class="heading text-center">
<h2>Experimental Learning</h2>
<p></p>
</div>
<div class="row">
<div class="col-md-12">
<div id="portfolio">
<ul class="filters list-inline text-center">
<li> <a class="active" data-filter="*" href="#">All</a> </li>
<li> <a data-filter=".academic" href="#">Academic</a> </li>
<li> <a data-filter=".sales" href="#">Sales & Freelance</a> </li>
<li> <a data-filter=".bpo" href="#">BPO</a> </li>
</ul>
<ul class="items list-unstyled clearfix animated fadeInRight showing" data-animation="fadeInRight" style="position: relative; height: 438px;">
<li class="item academic" style="position: absolute; left: 0px; top: 0px;"> <a href="images/work/sol.jpg" class="fancybox"> <img src="images/work/sol.jpg" style="width:304px;height:228px;" alt="">
<div class="overlay"> <span>Solaire Hotel & Resort Casino</span> </div>
</a> </li>
<li class="item bpo" style="position: absolute; left: 292px; top: 0px;"> <a href="images/work/tele.jpeg" class="fancybox"> <img src="images/work/tele.jpeg" style="width:304px;height:228px;" alt="">
<div class="overlay"> <span>Teleperformance</span> </div>
</a> </li>
<li class="item academic" style="position: absolute; left: 585px; top: 0px;"> <a href="images/work/sc.jpg" class="fancybox"> <img src="images/work/sc.jpg"
style="width:304px;height:228px;" alt="">
<div class="overlay"> <span>Pierre Romancon Scholarship Grant</span> </div>
</a> </li>
<li class="item sales" style="position: absolute; left: 877px; top: 0px;"> <a href="images/work/av.jpg" class="fancybox"> <img src="images/work/av.jpg" style="width:304px;height:228px;" alt="">
<div class="overlay"> <span>Avida Corporation</span> </div>
</a> </li>
<li class="item bpo" style="position: absolute; left: 0px; top: 219px;"> <a href="images/work/tt.jpg" class="fancybox"> <img src="images/work/tt.jpg" style="width:304px;height:228px;" alt="">
<div class="overlay"> <span>Teletech</span> </div>
</a> </li>
<li class="item sales" style="position: absolute; left: 292px; top: 219px;"> <a href="images/work/fl.jpg" class="fancybox"> <img src="images/work/fl.jpg" style="width:304px;height:228px;" alt="">
<div class="overlay"> <span>Freelance RealEstate</span> </div>
</a> </li>
<li class="item bpo" style="position: absolute; left: 585px; top: 219px;"> <a href="images/work/x.jpg" class="fancybox"> <img src="images/work/x.jpg" style="width:304px;height:228px;" alt="">
<div class="overlay"> <span>Affiliated Computer Services</span> </div>
</a> </li>
<li class="item academic" style="position: absolute; left: 877px; top: 219px;"> <a href="images/work/startup.jpg" class="fancybox"> <img src="images/work/startup.jpg" style="width:304px;height:228px;" alt="">
<div class="overlay"> <span>Benildean Startup Youth Day 2014</span> </div>
</a> </li>
</ul>
</div>
</div>
</div>
</div>
</section>
当我复制相同的部分页面时，它在类中没有执行相同的功能。
<section id="work1" class="page-section page">
<div class="container">
<div class="heading text-center">
<h2>Exemplary Academic Work</h2>
<p></p>
</div>
<div class="row">
<div class="col-md-12">
<div id="portfolio1">
<ul class="filters list-inline text-center">
<li> <a class="active" data-filter="*" href="#">All</a> </li>
<li> <a data-filter=".proglanproject" href="#">Programming Language</a> </li>
<li> <a data-filter=".thesis" href="#">Thesis</a> </li>
</ul>
<ul class="items list-unstyled clearfix animated fadeInRight showing" data-animation="fadeInRight" style="position: relative; height: 438px;">
<li class="item proglanproject" style="position: absolute; left: 0px; top: 0px;"> <a href="images/work/Picture1.png" class="fancybox"> <img src="images/work/Picture1.png" style="width:304px;height:228px;" alt="">
<div class="overlay"> <span>LUA Steam Project Site Map</span> </div>
</a> </li>
<li class="item proglanproject" style="position: absolute; left: 292px; top: 0px;"> <a href="images/work/Picture2.png" class="fancybox"> <img src="images/work/Picture2.png" style="width:304px;height:228px;" alt="">
<div class="overlay"> <span>LUA Steam Project Site Map</span> </div>
</a> </li>
<li class="item thesis" style="position: absolute; left: 585px; top: 0px;"> <a href="images/work/th5.png" class="fancybox"> <img src="images/work/th5.png" style="width:304px;height:228px;" alt="">
<div class="overlay"> <span>Registration Page</span> </div>
</a> </li>
<li class="item thesis" style="position: absolute; left: 877px; top: 0px;"> <a href="images/work/th4.png" class="fancybox"> <img src="images/work/th4.png" style="width:304px;height:228px;" alt="">
<div class="overlay"> <span>Contact Form</span> </div>
</a> </li>
<li class="item thesis" style="position: absolute; left: 0px; top: 219px;"> <a href="images/work/th3.png" class="fancybox"> <img src="images/work/th3.png" style="width:304px;height:228px;" alt="">
<div class="overlay"> <span>Customer Profile Page</span> </div>
</a> </li>
<li class="item thesis" style="position: absolute; left: 292px; top: 219px;"> <a href="images/work/th2.png" class="fancybox"> <img src="images/work/th2.png" style="width:304px;height:228px;" alt="">
<div class="overlay"> <span>Checkout DashBoard</span> </div>
</a> </li>
<li class="item thesis" style="position: absolute; left: 585px; top: 219px;"> <a href="images/work/th1.png" class="fancybox"> <img src="images/work/th1.png" style="width:304px;height:228px;" alt="">
<div class="overlay"> <span>Product Dashboard</span> </div>
</a> </li>
<li class="item proglanproject" style="position: absolute; left: 877px; top: 219px;"> <a href="images/work/prog.PNG" class="fancybox"> <img src="images/work/prog.PNG" style="width:304px;height:228px;" alt="">
<div class="overlay"> <span>HTML Shopping Site</span> </div>
</a> </li>
</ul>
</div>
</div>
</div>
</div>
</section>
答案 0 :(得分：0)
我明白了。由于div的ID相同，同一页面上的复制会产生问题，它们会有所不同。
<section id="work2"...
相同
<div id="portfolio1"
等等...
答案 1 :(得分：0)
您还需要更新Javascript文件，告诉它该做什么。例如，我有一个Bootstrap单页模板，它引用assets / js / [themename] .js中的文件：
var filterList = {
init: function() {
// MixItUp plugin
// http://mixitup.io
$('#portfoliolist').mixitup({
targetSelector: '.portfolio',
filterSelector: '.filter',
effects: ['fade'],
easing: 'snap',
// call the hover effect
onMixEnd: filterList.hoverEffect()
});
},
正如您所看到的，它正在使用目标选择器.portfolio来标识它需要应用的类。我相信您需要复制该部分以适用于.portfolio1才能使其正常工作。
您已经使过滤器引用匹配，所以其他一切都应该没问题。哦，但根据你正在做的事情，你可能还需要更改ID #portfoliolist。