Gerardo Gerardo - 6 months ago 32
HTML Question

Smooth color transition on tab change with CSS

I want to change the background of each tab on this tab HTML layout. The transition from when you select one tab to the other needs to be smooth. Right now it changes to white and then to the next color. Is it possible to change it to the color directly using CSS?

<div class="container">
<ul class="tabs">
<li id="seville"><a href="#tab1">Seville</a></li>
<li id="alicante"><a href="#tab2">Alicante</a></li>
<li id="barcelona"><a href="#tab3">Barcelona</a></li>
<li id="cordoba"><a href="#tab4">Córdoba</a></li>
<li id="sanjuan"><a href="#tab5">San Juan</a></li>
<li id="havana"><a href="#tab6">Havana</a></li>

</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">

</div>
<div id="tab2" class="tab_content">
<div class="column-left-tabs">

</div>
<div id="tab3" class="tab_content">
<div class="column-left-tabs">

</div>
<div id="tab4" class="tab_content">
<div class="column-left-tabs">

</div>
<div id="tab5" class="tab_content">
<div class="column-left-tabs">

</div>
<div id="tab6" class="tab_content">
<div class="column-left-tabs">

</div>
</div>
</div>


You can view the whole code on this jsfiddle. Test transitioning from the "seville" tab to the "alicante" tab.

https://jsfiddle.net/4yhupgum/

Here is a gif to show the problem: https://gyazo.com/eb7333a156757abacfe1fee8da032dd6

Answer

The issue is, it is just showing background-color of body before transforming to other color. Try resolve it by jquery like below.

1) Get background-color of active tab first

var background_color = $(this).css( "background-color" );

2) Then apply it to main tab container

$('.tab_container').css("background",background_color);

this will make your need done.

Check here,

$(document).ready(function () {

		//Default Action
		$(".tab_content").hide(); //Hide all content
		$("ul.tabs li:first").addClass("active").show(); //Activate first tab
		$(".tab_content:first").show(); //Show first tab content

		//On Click Event
		$("ul.tabs li").click(function () {
           
            /*code I have added is here*/
            var background_color = $(this).css( "background-color" );
            $('.tab_container').css("background",background_color);
			
          
            $("ul.tabs li").removeClass("active"); //Remove any "active" class
			$(this).addClass("active"); //Add "active" class to selected tab
			$(".tab_content").hide(); //Hide all tab content
			var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
      
      $(activeTab).fadeIn('fast'); //Fade in the active content
			return false;
		});

	});
.container {
	width: 1300;
	margin: 10px auto;
}

ul.tabs {
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid black;
	display: flex;
}

ul.tabs li {
	float: left;
	width: 15%;
	margin: 0;
	padding: 0;
	line-height: 31px;
	margin-bottom: -1px;
	background: #F0F0F0;
	flex: auto;
	border: 1px solid black;
}

ul.tabs li:first-child {
	border-top-left-radius: 8px;
}

ul.tabs li:last-child {
	border-top-right-radius: 8px;
}

ul.tabs li a {
	text-decoration: none;
	color: #000;
	display: block;
	font-size: 1.2em;
	padding: 15px;
	outline: none;
	text-align: center;
}
ul.tabs{
  transition:all .1s ease-out;
}
ul.tabs #seville {
	background-color: C95A00
}

ul.tabs #seville.active {
	background-color: E0861A;
}

ul.tabs #alicante {
	background-color: #499540
}

ul.tabs #alicante.active {
	background-color: #7FB438
}

ul.tabs #barcelona {
	background-color: #2744E1
}

ul.tabs #barcelona.active {
	background-color: #0088CA
}

ul.tabs #cordoba {
	background-color: #31124C
}

ul.tabs #cordoba.active {
	background-color: #4D2259
}

ul.tabs #sanjuan {
	background-color: #810012
}

ul.tabs #sanjuan.active {
	background-color: #812921
}

ul.tabs #havana {
	background-color: #C95A00
}

ul.tabs #havana.active {
	background-color: #C95A00
}

html ul.tabs li.active,
html ul.tabs li.active a:hover {
	border-bottom: 0px;
}

.tab_container {
	border: 1px solid black;
	border-top: none;
	clear: both;
	float: left;
	width: 100%;
	background: #fff;
	-moz-border-radius-bottomright: 5px;
	-khtml-border-radius-bottomright: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-moz-border-radius-bottomleft: 5px;
	-khtml-border-radius-bottomleft: 5px;
	-webkit-border-bottom-left-radius: 5px;
}

.tab_container img {
	float: right;
	position: relative;
}

.tab_content {
	padding: 0 0 10 0;
	font-size: 1.2em;
	height: 365px;
	font-family: 'Lato', sans-serif;
	color: white;
	transition: background 0.5s linear;

}

.tab_content#tab1 {
	background-color: #E67E22;
}

.tab_content#tab2 {
	background-color: #7FB438
}

.tab_content#tab3 {
	background-color: #0088CA
}

.tab_content#tab4 {
	background-color: #4D2259
}

.tab_content#tab5 {
	background-color: #812921
}

.tab_content#tab6 {
	background-color: grey
}

.tab_content h2 {
	font-weight: normal;
	font-size: 2em;
}

.tab_content p {
	font-size: 1.2em;
}

a.tabs-ahead {
	display: inline-block;
	text-decoration: none;
	font-size: 18px;
	padding: 0.5em 1em;
	margin: 0;
	background-color: #D35400;
	border-radius: 0.25em;
	color: #FFF;
	behavior: url('assets/css3pie/1.0.0/PIE.htc');
}

.tab_content h3 a {
	color: #254588;
}

.tab_content img {
	margin: 0 0 0px 0;
	border: 1px solid #ddd;
	padding: 5px;
	width: 100%;
}

.column-left-tabs {
	float: left;
	width: 49.5%;
	box-sizing: border-box;
	padding-left: 50px;
}

.column-right-tabs {
	float: right;
	width: 49.5%;
}

.column-2-tabs {
	display: inline-block;
	width: 33%;
}

.column-1-tabs {
	float: left;
	width: 33%;
}

.column-3-tabs {
	float: right;
	width: 33%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
	<ul class="tabs">
		<li id="seville"><a href="#tab1">Seville</a></li>
		<li id="alicante"><a href="#tab2">Alicante</a></li>
		<li id="barcelona"><a href="#tab3">Barcelona</a></li>
		<li id="cordoba"><a href="#tab4">Córdoba</a></li>
		<li id="sanjuan"><a href="#tab5">San Juan</a></li>
		<li id="havana"><a href="#tab6">Havana</a></li>

	</ul>
	<div class="tab_container">
		<div id="tab1" class="tab_content">
 
		</div>
		<div id="tab2" class="tab_content">
			<div class="column-left-tabs">

		</div>
		<div id="tab3" class="tab_content">
			<div class="column-left-tabs">

		</div>
		<div id="tab4" class="tab_content">
			<div class="column-left-tabs">

		</div>
		<div id="tab5" class="tab_content">
			<div class="column-left-tabs">

		</div>
		<div id="tab6" class="tab_content">
			<div class="column-left-tabs">

		</div>
	</div>
</div>

Comments