Vì vậy, tôi đã xây dựng một trang web dựa trên mẫu mà tôi tìm thấy trực tuyến, sẽ đánh giá cao bất kỳ trợ giúp nào để hoạt động theo cách tôi muốn. Hiện tại, nó được thiết lập với các bộ lọc cho phép bạn sắp xếp qua nhiều hình thu nhỏ. Tuy nhiên, tôi muốn các liên kết hiện hoạt động như "bộ lọc" thay thế cho div nơi tất cả các hình thu nhỏ hiển thị.Thay thế nội dung của Div trên trang đơn
Tôi đã tìm kiếm quanh đây tại jQuery, để thay thế nội dung div, bao gồm thay thế nội dung của div và ẩn div và hiển thị chúng khi nhấp. Không có gì tôi dường như làm công việc mặc dù.
Dưới đây là một ví dụ về HTML:
<!-- Portfolio Projects -->
<div class="row">
<div class="span3">
<!-- Filter -->
<nav id="options" class="work-nav">
<ul id="filters" class="option-set" data-option-key="filter">
<li class="type-work">Projects</li>
<li><a href="#filter" data-option-value="*" class="selected">All Projects</a></li>
<li><a href="#filter" data-option-value=".StarbucksCSR">Starbucks CSR Project</a></li>
</ul>
</nav>
<!-- End Filter -->
</div>
<div class="span9">
<div class="row">
<section id="projects">
<ul class="thumbs">
<!-- Item Project and Filter Name -->
<li class="item-thumbs span3 StarbucksCSR">
<!-- Fancybox - Gallery Enabled - Title - Full Image -->
<a class="hover-wrap fancybox" data-fancybox-group="gallery" title="Project Title" href="_include/img/work/full/url.jpg">
<span class="overlay-img"></span>
<span class="overlay-img-thumb font-icon-plus"></span>
</a>
<!-- Thumb Image and Description -->
<img src="_include/img/work/thumbs/url.jpg" alt="Project info">
</li>
<!-- End Item Project -->
</ul>
</section>
</div>
</div>
</div>
<!-- End Portfolio Projects -->
</div>
Lý tưởng nhất, tôi muốn quấn hiện UL trong một div tên "designprojects" và sau đó khi tôi nhấp vào một bộ lọc mà div được thay thế bằng một cái mới có thông tin dự án trong đó.
đây đang Java hiện tại trang web sử dụng để làm cho các bộ lọc chức năng:
.filter = function(){
if($('#projects').length > 0){
var $container = $('#projects');
$container.imagesLoaded(function() {
$container.isotope({
// options
animationEngine: 'best-available',
itemSelector : '.item-thumbs',
layoutMode : 'fitRows'
});
});
// filter items when filter link is clicked
var $optionSets = $('#options .option-set'),
$optionLinks = $optionSets.find('a');
$optionLinks.click(function(){
var $this = $(this);
// don't proceed if already selected
if ($this.hasClass('selected')) {
return false;
}
var $optionSet = $this.parents('.option-set');
$optionSet.find('.selected').removeClass('selected');
$this.addClass('selected');
// make option object dynamically, i.e. { filter: '.my-filter-class' }
var options = {},
key = $optionSet.attr('data-option-key'),
value = $this.attr('data-option-value');
// parse 'false' as false boolean
value = value === 'false' ? false : value;
options[ key ] = value;
if (key === 'layoutMode' && typeof changeLayoutMode === 'function') {
// changes in layout modes need extra logic
changeLayoutMode($this, options)
} else {
// otherwise, apply new options
$container.isotope(options);
}
return false;
});
}
}
Để tóm tắt lại, khi tôi nhấp vào "Tất cả Dự án" Tôi muốn nhìn thấy hình thu nhỏ mà tôi có thể nhấp chuột phải và thực hiện đầy đủ màn hình (chức năng hiện tại, cũng muốn điều này là mặc định).
Khi tôi nhấp vào tên dự án, tôi muốn div giữ tất cả hình thu nhỏ được thay thế bằng một đoạn về dự án và hình thu nhỏ bổ sung có thể được nhấp để mở rộng đến toàn màn hình.
tiến bộ hiện tại của tôi có thể được nhìn thấy ở www.codyshipman.com