CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Gerardo
Gerardo

Reputation: 113

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

Upvotes: 1

Views: 3909

Answers (4)

Trimantra Software Solution
Trimantra Software Solution

Reputation: 3329

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>

Upvotes: 0

Poonam
Poonam

Reputation: 549

In every .tab_content div you have an other div <div class="column-left-tabs"> and you are not closing it in any .tab_content div.

This is your mistake. check it and replace <div class="column-left-tabs"> with <div class="column-left-tabs"></div>. That's it. 

    <div id="tab1" class="tab_content">

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

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

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

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

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

    </div>
</div>

Replace Your CSS with this code:

    .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 #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: E0861A;
}

.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: #C95A00
}

.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%;
}

Upvotes: 1

GMchris
GMchris

Reputation: 5648

It doesn't really change to white though. You're just seeing the background. The problem is that you have several windows, corresponding to your tabs. So when you display one of them the previous one is hidden right away (so you don't really see it's color anymore), and the new one is placed and it goes from the default transparent to the color you chose.

What I advise is having a single .page-wrapper element, and place all pages in that. Then give it a transition: background-color .8s and while you're hiding and showing the pages within it, change the .page-wrapper's background-color property.

Upvotes: 0

Shahil Mohammed
Shahil Mohammed

Reputation: 3868

Are you looking out for this 

ul.tabs {
  transition:all .8s ease-out;
}

Upvotes: 0

Related Questions