从库中仅显示1个选项卡

Question

我目前正在尝试从图库标签中仅显示一个标签，因为现在所有标签都会在页面加载时显示。

以下是我的整个代码，如果有人可以向我展示如何在页面加载时只显示1个标签的示例！

(function() {
	
	var thumbsSpacing = 25;

	$('.filter').css('margin-bottom', thumbsSpacing + 'px');
	$('.thumbnail').addClass('showThumb').addClass('fancybox').attr('rel', 'group');

	$('a.sortLink').on('click', function(e) {
		e.preventDefault();
		$('a.sortLink').addClass('selected');
		$(this).removeClass('selected');

		var category = $(this).data('category');
		filterThumbs(category);
	});

	positionThumbs();
	setInterval(checkViewport, 750);

	function checkViewport() {

		var photosWidth = $('.photos').width(),
			thumbsContainerWidth = $('.thumbnail_wrap').width(),
			thumbnailWidth = $('a.thumbnail:first-child').outerWidth();

		if ( photosWidth < thumbsContainerWidth ) {
			positionThumbs();
		}

		if ( (photosWidth - thumbnailWidth) > thumbsContainerWidth ) {
			positionThumbs();
		}
	}

	function filterThumbs(category) {
		
		$('a.thumbnail').each(function() {
			var thumbCategory = $(this).data('categories');

			if ( category === 'all' ) {
				$(this).addClass('showThumb').removeClass('hideThumb').attr('rel', 'group');
			} else {
				if ( thumbCategory.indexOf(category) !== -1 ) {
					$(this).addClass('showThumb').removeClass('hideThumb').attr('rel', 'group');
				} else {
					$(this).addClass('hideThumb').removeClass('showThumb').attr('rel', 'none');
				}
			}
		});

		positionThumbs();

	}

	function positionThumbs() {

		$('a.thumbnail.hideThumb').animate({
			'opacity': 0
		}, 500, function() {
			$(this).css({
				'display': 'none',
				'top': '0px',
				'left': '0px'
			});
		});

		var containerWidth = $('.photos').width(),
			thumbRow = 0,
			thumbColumn = 0,
			thumbWidth = $('.thumbnail img:first-child').outerWidth() + thumbsSpacing,
			thumbHeight = $('.thumbnail img:first-child').outerHeight() + thumbsSpacing,
			maxColumns = Math.floor( containerWidth / thumbWidth );

		$('a.thumbnail.showThumb').each(function(index){
			var remainder = ( index%maxColumns ) / 100,
				maxIndex = 0;

			if( remainder === 0 ) {
				if( index !== 0 ) {
					thumbRow += thumbHeight;
				}
				thumbColumn = 0;
			} else {
				thumbColumn += thumbWidth;
			}

			$(this).css('display', 'block').animate({
				'opacity': 1,
				'top': thumbRow + 'px',
				'left': thumbColumn + 'px'
			}, 500);

			var newWidth = thumbColumn + thumbWidth,
				newHeight = thumbRow + thumbHeight;
			$('.thumbnail_wrap').css({
				'width': newWidth + 'px',
				'height': newHeight + 'px'
			});
		});

		findFancyBoxLinks();
	}

	function findFancyBoxLinks() {

		$('a.fancybox[rel="group"]').fancybox({
			'transitionIn' : 'elastic',
			'transitionOut' : 'elastic',
			'titlePosition' : 'over',
			'speedIn' : 500,
			'overlayColor' : '#000',
			'padding' : 0,
			'overlayOpacity' : .75
		});
	}

})();

p {
	margin: 0px 0px 1em 0px;
}

a {
	outline: none;
}

.title {
	width: 70%;
	margin: 0px auto 40px;
}

.title h1 {
	text-align: center;
	font-size: 36px;
	text-transform: uppercase;
	padding: 10px 10px;
	border-radius: 5px;
	box-shadow: 0px 0px 5px 1px #FCFAE1;
}

.gallery {
	width: 97%;
	margin: 0;
}

.filter {
	background-color: #f0f0f0;
	margin-bottom: 1em;
	padding: 2em 0 2em 1em;
	box-shadow: 0px 0px 5px #a90000;
}

	.filter span {
		padding: 0 :; 0 0;
		font-family: Georgia, cursive;
		font-style: italic;
	}

	.filter a {
		color: #a90000;
		font-size: .95em;
		text-decoration: none;
		text-transform: uppercase;
		padding: 3px 20px;
		background: url('../img/unchecked.png') no-repeat 0px 3px;
	}

	.filter a:hover {
		color: #B9121B;
	}

	.filter a.selected {
		color: #B9121B;
		background: url('../img/checked.png') no-repeat 0px 3px;
	}

.wrap {
	width: 100%;
	height: 2000px;
	position: relative;
}

a.thumbnail {
	position: absolute;
}

a.thumbnail img {
	width: 190px;
	height: 170px;
	background-color: #f0f0f0;
	padding: 2px;
	box-shadow: 0px 0px 4px #BD8D46;
}

	a.thumbnail img:hover {
		box-shadow: 0px 0px 4px #4C1B1B;
	}

.clear_floats {
	clear: both;
	line-height: 1px;
}

/* Horizontal Media Queries */
@media screen and (min-height: 50px) and (max-height: 520px) {
	.title h1 {
		font-size: 18px;
	}
}

@media screen and (min-height: 521px) and (max-height: 700px) {
	.title h1 {
		font-size: 24px;
	}
}


/* Vertical Media Queries */
@media screen and (min-width: 50px) and (max-width: 500px) {
	.title h1 {
		font-size: 18px;
	}

	.gallery {
		width: auto;
	}

	.filter span {
		display: block;
		margin-bottom: 10px;
	}

	.filter a {
		display: block;
	}
}

@media screen and (min-width: 501px) and (max-width: 960px) {
	.title h1 {
		font-size: 24px;
	}

	.filter span {
		display: block;
		margin-bottom: 10px;
	}

	.filter a {
		display: block;
		width: 35%;
		float: left;
	}
}

@media screen and (min-width: 961px) {
	.filter span {
		padding-right: 20px;
	}
}

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@*" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div class="gallery">
			<div class="filter">
				<div>
					<a href="#" class="sortLink selected" data-category="sec">Sectional doors</a>
					<a href="#" class="sortLink1" data-category="rol">Roller doors</a>
					<a href="#" class="sortLink1" data-category="fly">flywing</a>
					<a href="#" class="sortLink1" data-category="pp">patatos</a>
					<a href="#" class="sortLink1" data-category="alu">aluminium</a>
					<a href="#" class="sortLink1" data-category="oth">other</a>
					<div class="clear_floats"></div>
				</div>
			</div>

			<div class="photos">
				
				<div class="wrap">

					<a href="photos/sec/1.jpg" class="thumbnail" data-categories="rol" title="секционна гаражна врата">
						<img src="photos/sec/1.jpg" alt="секционна гаражна врата">
					</a>
					<a href="photos/sec/2.jpg" class="thumbnail" data-categories="oth" title="секционна гаражна врата">
						<img src="photos/sec/2.jpg" alt="секционна гаражна врата">
					</a>
					</div><!-- .thumbnail_wrap end -->

			</div><!-- .photos end -->

		</div
  </body>

</html>