jQuery animation tab slider

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty margin-bottom:0;

up vote
2
down vote

favorite

I'm a beginner in js and jQuery. I wrote animation tab-slider. But my code is bad. What should I improve? What should I do to make the code less cumbersome?

var slideTabImg = $('.js-slide-tabImg');
var firstTab = $('#js-first-tabImg');
var secondTab = $('#js-second-tabImg');

$('#js-first-tab').click(function()
 $(this).next().removeClass('m-slideTa href');
 $(this).addClass('m-slideTab-href');

 slideTabImg.removeClass('m-slide-tabImg_active');
 slideTabImg.removeClass('m-secondTab-active m-firstTab-active');

 secondTab.addClass('m-secondTab-active');
 firstTab.addClass('m-slide-tabImg_active m-firstTab-active');
);

$('#js-second-tab').click(function()
		$(this).prev().removeClass('m-slideTab-href');
		$(this).addClass('m-slideTab-href');

 	slideTabImg.removeClass('m-secondTab-active m-firstTab-active');
		slideTabImg.removeClass('m-slide-tabImg_active');
		
		secondTab.addClass('m-slide-tabImg_active m-firstTab-active');
		firstTab.addClass('m-secondTab-active');
);

.slide-tabImages 
	position: relative;
	width: 100%;
	max-width: 860px;
	margin: 0 auto;

.slide-tabImg 
	position: absolute;

.m-slide-tabImg_active 
	top: 40px;
	left: -40px;
	z-index: 5

.slide-tab 
	padding: 30px 0;

.slideTab-href 
	font-size: 20px;
	color: #000;
	text-transform: uppercase;
	font-weight: normal;
	cursor: pointer;
	margin: 0 8px;

.slideTab-href:hover 
	text-decoration: none;

.slideTabLink 
	padding-top: 80px;

.m-slideTab-href 
	border-bottom: 1px dashed;
 

.m-secondTab-active 
 animation: secondTab-animation 2.5s forwards;


.m-firstTab-active 
 animation: firstTab-animation 2.5s forwards;


@keyframes secondTab-animation 
 49% 
 transform: translateX(-120px);
 
 
 to 
 transform: translateX(0);
 z-index: 1;
 


@keyframes firstTab-animation 
 49% 
 transform: translateX(120px);
 
 
 to 
 transform: translateX(0);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class=" slideTabLink">
	<a id="js-first-tab" class=" slideTab-href m-slideTab-href">New</a>
	<a id="js-second-tab" class=" slideTab-href">Old</a>
</div>
			
<div class=" slide-tab js-slide-tab">
	<div class=" slide-tabImages">
	<div class=" slide-tabImg m-slide-tabImg_active js-slide-tabImg" id="js-first-tabImg">
			<img src="https://habrastorage.org/webt/5a/fe/b6/5afeb68da321d060058111.png" alt="">
		</div>
		<div class=" slide-tabImg js-slide-tabImg" id="js-second-tabImg">
			<img src="https://habrastorage.org/webt/5a/fe/b6/5afeb6aea3f83085649799.png" alt="">
		</div>
	</div>
</div>

asked May 21 at 9:37

Wexzuq

111

add a commentÂ |Â

up vote
2
down vote

favorite

I'm a beginner in js and jQuery. I wrote animation tab-slider. But my code is bad. What should I improve? What should I do to make the code less cumbersome?

var slideTabImg = $('.js-slide-tabImg');
var firstTab = $('#js-first-tabImg');
var secondTab = $('#js-second-tabImg');

$('#js-first-tab').click(function()
 $(this).next().removeClass('m-slideTa href');
 $(this).addClass('m-slideTab-href');

 slideTabImg.removeClass('m-slide-tabImg_active');
 slideTabImg.removeClass('m-secondTab-active m-firstTab-active');

 secondTab.addClass('m-secondTab-active');
 firstTab.addClass('m-slide-tabImg_active m-firstTab-active');
);

$('#js-second-tab').click(function()
		$(this).prev().removeClass('m-slideTab-href');
		$(this).addClass('m-slideTab-href');

 	slideTabImg.removeClass('m-secondTab-active m-firstTab-active');
		slideTabImg.removeClass('m-slide-tabImg_active');
		
		secondTab.addClass('m-slide-tabImg_active m-firstTab-active');
		firstTab.addClass('m-secondTab-active');
);

.slide-tabImages 
	position: relative;
	width: 100%;
	max-width: 860px;
	margin: 0 auto;

.slide-tabImg 
	position: absolute;

.m-slide-tabImg_active 
	top: 40px;
	left: -40px;
	z-index: 5

.slide-tab 
	padding: 30px 0;

.slideTab-href 
	font-size: 20px;
	color: #000;
	text-transform: uppercase;
	font-weight: normal;
	cursor: pointer;
	margin: 0 8px;

.slideTab-href:hover 
	text-decoration: none;

.slideTabLink 
	padding-top: 80px;

.m-slideTab-href 
	border-bottom: 1px dashed;
 

.m-secondTab-active 
 animation: secondTab-animation 2.5s forwards;


.m-firstTab-active 
 animation: firstTab-animation 2.5s forwards;


@keyframes secondTab-animation 
 49% 
 transform: translateX(-120px);
 
 
 to 
 transform: translateX(0);
 z-index: 1;
 


@keyframes firstTab-animation 
 49% 
 transform: translateX(120px);
 
 
 to 
 transform: translateX(0);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class=" slideTabLink">
	<a id="js-first-tab" class=" slideTab-href m-slideTab-href">New</a>
	<a id="js-second-tab" class=" slideTab-href">Old</a>
</div>
			
<div class=" slide-tab js-slide-tab">
	<div class=" slide-tabImages">
	<div class=" slide-tabImg m-slide-tabImg_active js-slide-tabImg" id="js-first-tabImg">
			<img src="https://habrastorage.org/webt/5a/fe/b6/5afeb68da321d060058111.png" alt="">
		</div>
		<div class=" slide-tabImg js-slide-tabImg" id="js-second-tabImg">
			<img src="https://habrastorage.org/webt/5a/fe/b6/5afeb6aea3f83085649799.png" alt="">
		</div>
	</div>
</div>

asked May 21 at 9:37

Wexzuq

111

add a commentÂ |Â

up vote
2
down vote

favorite

I'm a beginner in js and jQuery. I wrote animation tab-slider. But my code is bad. What should I improve? What should I do to make the code less cumbersome?

var slideTabImg = $('.js-slide-tabImg');
var firstTab = $('#js-first-tabImg');
var secondTab = $('#js-second-tabImg');

$('#js-first-tab').click(function()
 $(this).next().removeClass('m-slideTa href');
 $(this).addClass('m-slideTab-href');

 slideTabImg.removeClass('m-slide-tabImg_active');
 slideTabImg.removeClass('m-secondTab-active m-firstTab-active');

 secondTab.addClass('m-secondTab-active');
 firstTab.addClass('m-slide-tabImg_active m-firstTab-active');
);

$('#js-second-tab').click(function()
		$(this).prev().removeClass('m-slideTab-href');
		$(this).addClass('m-slideTab-href');

 	slideTabImg.removeClass('m-secondTab-active m-firstTab-active');
		slideTabImg.removeClass('m-slide-tabImg_active');
		
		secondTab.addClass('m-slide-tabImg_active m-firstTab-active');
		firstTab.addClass('m-secondTab-active');
);

.slide-tabImages 
	position: relative;
	width: 100%;
	max-width: 860px;
	margin: 0 auto;

.slide-tabImg 
	position: absolute;

.m-slide-tabImg_active 
	top: 40px;
	left: -40px;
	z-index: 5

.slide-tab 
	padding: 30px 0;

.slideTab-href 
	font-size: 20px;
	color: #000;
	text-transform: uppercase;
	font-weight: normal;
	cursor: pointer;
	margin: 0 8px;

.slideTab-href:hover 
	text-decoration: none;

.slideTabLink 
	padding-top: 80px;

.m-slideTab-href 
	border-bottom: 1px dashed;
 

.m-secondTab-active 
 animation: secondTab-animation 2.5s forwards;


.m-firstTab-active 
 animation: firstTab-animation 2.5s forwards;


@keyframes secondTab-animation 
 49% 
 transform: translateX(-120px);
 
 
 to 
 transform: translateX(0);
 z-index: 1;
 


@keyframes firstTab-animation 
 49% 
 transform: translateX(120px);
 
 
 to 
 transform: translateX(0);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class=" slideTabLink">
	<a id="js-first-tab" class=" slideTab-href m-slideTab-href">New</a>
	<a id="js-second-tab" class=" slideTab-href">Old</a>
</div>
			
<div class=" slide-tab js-slide-tab">
	<div class=" slide-tabImages">
	<div class=" slide-tabImg m-slide-tabImg_active js-slide-tabImg" id="js-first-tabImg">
			<img src="https://habrastorage.org/webt/5a/fe/b6/5afeb68da321d060058111.png" alt="">
		</div>
		<div class=" slide-tabImg js-slide-tabImg" id="js-second-tabImg">
			<img src="https://habrastorage.org/webt/5a/fe/b6/5afeb6aea3f83085649799.png" alt="">
		</div>
	</div>
</div>

asked May 21 at 9:37

Wexzuq

111

I'm a beginner in js and jQuery. I wrote animation tab-slider. But my code is bad. What should I improve? What should I do to make the code less cumbersome?

var slideTabImg = $('.js-slide-tabImg');
var firstTab = $('#js-first-tabImg');
var secondTab = $('#js-second-tabImg');

$('#js-first-tab').click(function()
 $(this).next().removeClass('m-slideTa href');
 $(this).addClass('m-slideTab-href');

 slideTabImg.removeClass('m-slide-tabImg_active');
 slideTabImg.removeClass('m-secondTab-active m-firstTab-active');

 secondTab.addClass('m-secondTab-active');
 firstTab.addClass('m-slide-tabImg_active m-firstTab-active');
);

$('#js-second-tab').click(function()
		$(this).prev().removeClass('m-slideTab-href');
		$(this).addClass('m-slideTab-href');

 	slideTabImg.removeClass('m-secondTab-active m-firstTab-active');
		slideTabImg.removeClass('m-slide-tabImg_active');
		
		secondTab.addClass('m-slide-tabImg_active m-firstTab-active');
		firstTab.addClass('m-secondTab-active');
);

.slide-tabImages 
	position: relative;
	width: 100%;
	max-width: 860px;
	margin: 0 auto;

.slide-tabImg 
	position: absolute;

.m-slide-tabImg_active 
	top: 40px;
	left: -40px;
	z-index: 5

.slide-tab 
	padding: 30px 0;

.slideTab-href 
	font-size: 20px;
	color: #000;
	text-transform: uppercase;
	font-weight: normal;
	cursor: pointer;
	margin: 0 8px;

.slideTab-href:hover 
	text-decoration: none;

.slideTabLink 
	padding-top: 80px;

.m-slideTab-href 
	border-bottom: 1px dashed;
 

.m-secondTab-active 
 animation: secondTab-animation 2.5s forwards;


.m-firstTab-active 
 animation: firstTab-animation 2.5s forwards;


@keyframes secondTab-animation 
 49% 
 transform: translateX(-120px);
 
 
 to 
 transform: translateX(0);
 z-index: 1;
 


@keyframes firstTab-animation 
 49% 
 transform: translateX(120px);
 
 
 to 
 transform: translateX(0);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class=" slideTabLink">
	<a id="js-first-tab" class=" slideTab-href m-slideTab-href">New</a>
	<a id="js-second-tab" class=" slideTab-href">Old</a>
</div>
			
<div class=" slide-tab js-slide-tab">
	<div class=" slide-tabImages">
	<div class=" slide-tabImg m-slide-tabImg_active js-slide-tabImg" id="js-first-tabImg">
			<img src="https://habrastorage.org/webt/5a/fe/b6/5afeb68da321d060058111.png" alt="">
		</div>
		<div class=" slide-tabImg js-slide-tabImg" id="js-second-tabImg">
			<img src="https://habrastorage.org/webt/5a/fe/b6/5afeb6aea3f83085649799.png" alt="">
		</div>
	</div>
</div>

var slideTabImg = $('.js-slide-tabImg');
var firstTab = $('#js-first-tabImg');
var secondTab = $('#js-second-tabImg');

$('#js-first-tab').click(function()
 $(this).next().removeClass('m-slideTa href');
 $(this).addClass('m-slideTab-href');

 slideTabImg.removeClass('m-slide-tabImg_active');
 slideTabImg.removeClass('m-secondTab-active m-firstTab-active');

 secondTab.addClass('m-secondTab-active');
 firstTab.addClass('m-slide-tabImg_active m-firstTab-active');
);

$('#js-second-tab').click(function()
		$(this).prev().removeClass('m-slideTab-href');
		$(this).addClass('m-slideTab-href');

 	slideTabImg.removeClass('m-secondTab-active m-firstTab-active');
		slideTabImg.removeClass('m-slide-tabImg_active');
		
		secondTab.addClass('m-slide-tabImg_active m-firstTab-active');
		firstTab.addClass('m-secondTab-active');
);

.slide-tabImages 
	position: relative;
	width: 100%;
	max-width: 860px;
	margin: 0 auto;

.slide-tabImg 
	position: absolute;

.m-slide-tabImg_active 
	top: 40px;
	left: -40px;
	z-index: 5

.slide-tab 
	padding: 30px 0;

.slideTab-href 
	font-size: 20px;
	color: #000;
	text-transform: uppercase;
	font-weight: normal;
	cursor: pointer;
	margin: 0 8px;

.slideTab-href:hover 
	text-decoration: none;

.slideTabLink 
	padding-top: 80px;

.m-slideTab-href 
	border-bottom: 1px dashed;
 

.m-secondTab-active 
 animation: secondTab-animation 2.5s forwards;


.m-firstTab-active 
 animation: firstTab-animation 2.5s forwards;


@keyframes secondTab-animation 
 49% 
 transform: translateX(-120px);
 
 
 to 
 transform: translateX(0);
 z-index: 1;
 


@keyframes firstTab-animation 
 49% 
 transform: translateX(120px);
 
 
 to 
 transform: translateX(0);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class=" slideTabLink">
	<a id="js-first-tab" class=" slideTab-href m-slideTab-href">New</a>
	<a id="js-second-tab" class=" slideTab-href">Old</a>
</div>
			
<div class=" slide-tab js-slide-tab">
	<div class=" slide-tabImages">
	<div class=" slide-tabImg m-slide-tabImg_active js-slide-tabImg" id="js-first-tabImg">
			<img src="https://habrastorage.org/webt/5a/fe/b6/5afeb68da321d060058111.png" alt="">
		</div>
		<div class=" slide-tabImg js-slide-tabImg" id="js-second-tabImg">
			<img src="https://habrastorage.org/webt/5a/fe/b6/5afeb6aea3f83085649799.png" alt="">
		</div>
	</div>
</div>

var slideTabImg = $('.js-slide-tabImg');
var firstTab = $('#js-first-tabImg');
var secondTab = $('#js-second-tabImg');

$('#js-first-tab').click(function()
 $(this).next().removeClass('m-slideTa href');
 $(this).addClass('m-slideTab-href');

 slideTabImg.removeClass('m-slide-tabImg_active');
 slideTabImg.removeClass('m-secondTab-active m-firstTab-active');

 secondTab.addClass('m-secondTab-active');
 firstTab.addClass('m-slide-tabImg_active m-firstTab-active');
);

$('#js-second-tab').click(function()
		$(this).prev().removeClass('m-slideTab-href');
		$(this).addClass('m-slideTab-href');

 	slideTabImg.removeClass('m-secondTab-active m-firstTab-active');
		slideTabImg.removeClass('m-slide-tabImg_active');
		
		secondTab.addClass('m-slide-tabImg_active m-firstTab-active');
		firstTab.addClass('m-secondTab-active');
);

.slide-tabImages 
	position: relative;
	width: 100%;
	max-width: 860px;
	margin: 0 auto;

.slide-tabImg 
	position: absolute;

.m-slide-tabImg_active 
	top: 40px;
	left: -40px;
	z-index: 5

.slide-tab 
	padding: 30px 0;

.slideTab-href 
	font-size: 20px;
	color: #000;
	text-transform: uppercase;
	font-weight: normal;
	cursor: pointer;
	margin: 0 8px;

.slideTab-href:hover 
	text-decoration: none;

.slideTabLink 
	padding-top: 80px;

.m-slideTab-href 
	border-bottom: 1px dashed;
 

.m-secondTab-active 
 animation: secondTab-animation 2.5s forwards;


.m-firstTab-active 
 animation: firstTab-animation 2.5s forwards;


@keyframes secondTab-animation 
 49% 
 transform: translateX(-120px);
 
 
 to 
 transform: translateX(0);
 z-index: 1;
 


@keyframes firstTab-animation 
 49% 
 transform: translateX(120px);
 
 
 to 
 transform: translateX(0);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class=" slideTabLink">
	<a id="js-first-tab" class=" slideTab-href m-slideTab-href">New</a>
	<a id="js-second-tab" class=" slideTab-href">Old</a>
</div>
			
<div class=" slide-tab js-slide-tab">
	<div class=" slide-tabImages">
	<div class=" slide-tabImg m-slide-tabImg_active js-slide-tabImg" id="js-first-tabImg">
			<img src="https://habrastorage.org/webt/5a/fe/b6/5afeb68da321d060058111.png" alt="">
		</div>
		<div class=" slide-tabImg js-slide-tabImg" id="js-second-tabImg">
			<img src="https://habrastorage.org/webt/5a/fe/b6/5afeb6aea3f83085649799.png" alt="">
		</div>
	</div>
</div>

asked May 21 at 9:37

Wexzuq

111

asked May 21 at 9:37

Wexzuq

111

asked May 21 at 9:37

Wexzuq

111

asked May 21 at 9:37

Wexzuq

111

add a commentÂ |Â

active

oldest

votes

Your Answer

StackExchange.ifUsing("editor", function ()
return StackExchange.using("mathjaxEditing", function ()
StackExchange.MarkdownEditor.creationCallbacks.add(function (editor, postfix)
StackExchange.mathjaxEditing.prepareWmdForMathJax(editor, postfix, [["\$", "\$"]]);
);
);
, "mathjax-editing");

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "196"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
convertImagesToLinks: false,
noModals: false,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);

);

draft saved

draft discarded

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f194857%2fjquery-animation-tab-slider%23new-answer', 'question_page');

);

Post as a guest

Name

active

oldest

votes

draft saved

draft discarded

draft saved

draft discarded

Post as a guest

Name

搜尋此網誌

trjhtr