Pankaj Morajkar Pankaj Morajkar - 5 months ago 38
CSS Question

Different color for each tab

I have some tabs on my page using the following HTML. Currently the tabs are of the same color. I want each tab to be of a different color when clicked.

I am a Technical Writer and hence don't have much information about coding. Any help would be highly appreciated.

<ul id="tabs">
<li><a href="#" name="tab1">'Architecture'</a></li>
<li><a href="#" name="tab2">'Business System Functionality'</a></li>
<li><a href="#" name="tab3">'Environment Administration'</a></li>
<li><a href="#" name="tab4">'Product'</a></li>
<li><a href="#" name="tab4">'Testing'</a></li>
<li><a href="#" name="tab4">'Training'</a></li>
<li><a href="#" name="tab4">'Site Management'</a></li>
<li><a href="#" name="tab4">'Release Notes'</a></li>
</ul>


I also have the following css

#tabs {
overflow: hidden;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}

#tabs li {
float: left;
margin: 0 .5em 0 0;
}

#tabs a {
position: relative;
background: #3399cc;
background-image: linear-gradient(to bottom, #fff, #ddd);
padding: .7em 3.5em;
float: left;
text-decoration: none;
color: #444;
text-shadow: 0 1px 0 rgba(255,255,255,.8);
border-radius: 5px 0 0 0;
box-shadow: 0 2px 2px rgba(0,0,0,.4);
}

#tabs a:hover,
#tabs a:hover::after,
#tabs a:focus,
#tabs a:focus::after {
background: #fff;
}

#tabs a:focus {
outline: 0;
}

#tabs a::after {
content:'';
position:absolute;
z-index: 1;
top: 0;
right: -.5em;
bottom: 0;
width: 1em;
background: #ddd;
background-image: linear-gradient(to bottom, #fff, #ddd);
box-shadow: 2px 2px 2px rgba(0,0,0,.4);
transform: skew(10deg);
border-radius: 0 5px 0 0;
}

#tabs #current a,
#tabs #current a::after {
background: #fff;
z-index: 3;
}


And the following JQuery

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function() {
$("#content").find("[id^='tab']").hide(); // Hide all content
$("#tabs li:first").attr("id", "current"); // Activate the first tab
$("#content #tab1").fadeIn(); // Show first tab's content

$('#tabs a').click(function(e) {
e.preventDefault();
if ($(this).closest("li").attr("id") == "current") { //detection for
current tab
return;
} else {
$("#content").find("[id^='tab']").hide(); // Hide all content
$("#tabs li").attr("id", ""); //Reset id's
$(this).parent().attr("id", "current"); // Activate this
$('#' + $(this).attr('name')).fadeIn(); // Show content for the
current tab
}
});
});
</script>


JSFiddle - https://jsfiddle.net/3vbfq3bf/

Answer

Edited added for first three li

You want this? added only two li so manually you can give classes to each li and write respective css for it.

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function() {
$("#content").find("[id^='tab']").hide(); // Hide all content
$("#tabs li:first").attr("id","current"); // Activate the first tab
$("#content #tab1").fadeIn(); // Show first tab's content

$('#tabs a').click(function(e) {
    e.preventDefault();
    if ($(this).closest("li").attr("id") == "current"){ //detection for 
    current tab
     return;       
    }
    else{             
      $("#content").find("[id^='tab']").hide(); // Hide all content
      $("#tabs li").attr("id",""); //Reset id's
      $(this).parent().attr("id","current"); // Activate this
      $('#' + $(this).attr('name')).fadeIn(); // Show content for the   
      current tab
      }
      });
      });
      </script>
 #tabs {
  overflow: hidden;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

#tabs li {
  float: left;
  margin: 0 .5em 0 0;
}

#tabs a {
  position: relative;
  background: #3399cc;
  background-image: linear-gradient(to bottom, #fff, #ddd);  
  padding: .7em 3.5em;
  float: left;
  text-decoration: none;
  color: #444;
  text-shadow: 0 1px 0 rgba(255,255,255,.8);
  border-radius: 5px 0 0 0;
  box-shadow: 0 2px 2px rgba(0,0,0,.4);
}

#tabs a:hover,
#tabs a:hover::after,
#tabs a:focus,
#tabs a:focus::after {
  background: #fff;
}
#tabs a.one:hover,
#tabs a.one:hover::after,
#tabs a.one:focus,
#tabs a.one:focus::after {
  background: red;
}
#tabs a.second:hover,
#tabs a.second:hover::after,
#tabs a.second:focus,
#tabs a.second:focus::after {
  background: blue;
}
#tabs a.third:hover,
#tabs a.third:hover::after,
#tabs a.third:focus,
#tabs a.third:focus::after {
  background: green;
}


#tabs a:focus {
  outline: 0;
}

#tabs a::after {
  content:'';
  position:absolute;
  z-index: 1;
  top: 0;
  right: -.5em;  
  bottom: 0;
  width: 1em;
  background: #ddd;
  background-image: linear-gradient(to bottom, #fff, #ddd);  
  box-shadow: 2px 2px 2px rgba(0,0,0,.4);
  transform: skew(10deg);
  border-radius: 0 5px 0 0;  
}

#tabs #current a,
#tabs #current a::after {
  background: #fff;
  z-index: 3;
}

#content {
  background: #fff;
  padding: 2em;
  height: 220px;
  position: relative;
  z-index: 2;
  border-radius: 0 5px 5px 5px;
  box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);
}
<ul id="tabs">
    <li><a class="one" href="#" name="tab1">'Architecture'</a></li>
    <li><a class="second" href="#" name="tab2">'Business System Functionality'</a></li>
    <li><a class="third" href="#" name="tab3">'Environment Administration'</a></li>
    <li><a href="#" name="tab4">'Product'</a></li>    
    <li><a href="#" name="tab4">'Testing'</a></li>
    <li><a href="#" name="tab4">'Training'</a></li>
    <li><a href="#" name="tab4">'Site Management'</a></li>
    <li><a href="#" name="tab4">'Release Notes'</a></li>
</ul>