Итак, я строил сайт, основанный на шаблоне, который я нашел в Интернете, а также поможет получить его, чтобы он функционировал так, как я этого хочу. В настоящее время он настроен с фильтрами, которые позволяют сортировать несколько эскизов. Однако я хочу, чтобы ссылки, которые в настоящее время действуют как «фильтры», вместо этого заменяют div, где отображаются все миниатюры.Заменить содержимое Div на сайте одной страницы
Я искал вокруг здесь, глядя на jQuery, чтобы заменить содержимое div, включая замену содержимого div и скрытие div и отображение их по щелчку. Тем не менее, я ничего не делаю.
Вот пример 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>
В идеале, я бы обернуть текущий UL в течение div названных «designprojects», а затем, когда я нажимаю фильтр, который получает Div заменен новым, в котором есть информация о проекте.
Вот текущий Java, что сайт использует, чтобы сделать функцию фильтры:
.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;
});
}
}
резюмировать, когда я нажимаю «Все проекты» Я хочу, чтобы увидеть эскизы, которые я могу нажать и сделать полный экран (текущая функция, также хотите, чтобы это было по умолчанию).
Когда я нажимаю имя проекта, я хочу, чтобы div содержал все миниатюры, которые нужно заменить абзацем о проекте, и дополнительные миниатюры, которые можно щелкнуть, чтобы перейти к полноэкранному.
Мой текущий прогресс можно увидеть на www.codyshipman.com