Html 复制的引导程序不工作
我已经复制了这个单页引导，但是当我尝试复制同一个节页时，复制的节页没有执行这些类 我做错了什么 以下是工作代码：Html 复制的引导程序不工作,html,Html,我已经复制了这个单页引导，但是当我尝试复制同一个节页时，复制的节页没有执行这些类 我做错了什么 以下是工作代码： <section id="work" class="page-section page"> <div class="container"> <div class="heading text-center"> <h2>Experimental Learning</h2>
<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>
模范学术作品
-
-
-
<section id="work2"...
您还需要更新Javascript文件，告诉它该做什么。例如，我还有一个引导单页模板，它引用了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
。这意味着什么？是否有一些javascript代码与之连接，而您可能没有复制这些代码？您的意思是当您将其复制到一个新的.html文件时？如果是这样的话，它几乎肯定不起作用，因为你没有在新的页面中包含CSS文件，同样的html文件，先生@leemo@Mr.Web我在同一个html文件上复制它。复制的页面没有过滤，没有阅读class=“overlay”等。我的回答解决了您的问题吗？是的，先生。它的不同之处在于，您可以在第1个代码中看到，部分id=“work”，在第2个代码中看到，部分id=“work1”。此外，div id也不同。投资组合和投资组合1。
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()
});
},