问题:
我正在为我的个人投资组合网站创建一个图库页面 . 对于我艺术的不同类别,我需要它在顶部有多个链接 . 登陆网站后,将选择“全部”选项,我的艺术作品的所有缩略图都将显示并完全不透明 . 单击链接时,只有属于与链接对应的类别中的缩略图将保持100%不透明度,而其他缩略图将变暗为50% .
我认为代码接近正确,但仍然无效 . 以下是我正在使用的代码 .
(缩写)HTML:
<ul id="filterOptions">
<li class="active"><a href="#" class="all">All</a></li>
<li><a href="#" class="ty">Typography</a></li>
<li><a href="#" class="pr">Print</a></li>
</ul>
<ul class="ourHolder">
<li data-type="ty"><a href="img.jpg"><img src="img.png"/></a></li>
<li data-type="il"><a href="img.jpg"><img src="img.png"/></a></li>
<li data-type="pr"><a href="img.jpg"><img src="img.png"/></a></li>
CSS:
$(document).ready(function() {
var $holder = $('ul.ourHolder');
var $data = $holder.clone();
$('#filterOptions li a').click(
function(e) {
// reset the active class on all the buttons
$('#filterOptions li').removeClass('active');
// assign the class of the clicked filter option
// element to our $filterType variable
var $filterType = $(this).attr('class');
$(this).parent().addClass('active');
if ($filterType == 'all') {
// assign all li items to the $filteredData var when
// the 'All' filter option is clicked
var $filteredData = $data.find('li');
$filteredData.animate({opacity: 1.0}, 500);
}
else {
var $filteredData = $data.find('li[data-type=' + $filterType + ']');
$filteredData.animate({opacity: 0.5}, 500);
}
});
});
非常感谢任何帮助,我需要启动我的新网站,这些代码就是让我退缩的一切!
1 回答
jsFiddle demo
HTML
jQuery