Image tabs for the web sites

I wanted to have image tabs like the below picture, for my web site.

We can get this by little JavaScript and HTML itself.  Here is how I’ve done this.

<html>
<head>
<title></title>
<script language="javascript" type="text/javascript">

function setTabContent(Caller)
{
var s='Content-'+Caller;
document.getElementById('TabContainer').innerHTML=document.getElementById(s).innerText;
for (i=1;i<=6;i++)
{
document.getElementById("Tab"+i).className="";
}
document.getElementById(Caller).className="selected";
return false;
}

</script>
<link rel="Stylesheet" href="styles.css">
</head>
<body onload="javascript:setTabContent('tab1')">

<div id="Content-Tab1" style="display: none">
I&#39;am the content from Hiddent div 1!!! </div>
<div id="Content-Tab2" style="display: none">
I&#39;am the content from Hiddent div 2!!! </div>
<div id="Content-Tab3" style="display: none">
I&#39;am the content from Hiddent div 3!!! </div>
<div id="Content-Tab4" style="display: none">
I&#39;am the content from Hiddent div 4!!! </div>
<div id="Content-Tab5" style="display: none">
I&#39;am the content from Hiddent div 5!!! </div>
<div id="Content-Tab6" style="display: none">
I&#39;am the content from Hiddent div 6!!! </div>
<div>
<ul class="TabStrip">
<li>
<a id="Tab1" class="selected" href="javascript:void(0)" onclick="javascript:setTabContent(this.id)">
<span class="wrap">
<span class="innerWrap" style="WIDTH: 80px">
Overview</span></span></a>
</li>
<li>
<a id="Tab2" href="javascript:void(0);" onclick="javascript:setTabContent(this.id)">
<span class="wrap">
<span class="innerWrap" style="WIDTH: 80px">
Description</span></span></a>
</li>
<li>
<a id="Tab3" href="javascript:void(0);" onclick="javascript:setTabContent(this.id)">
<span class="wrap">
<span class="innerWrap" style="WIDTH: 80px">
Learn More</span></span></a> </li>
<li>
<a id="Tab4" href="javascript:void(0);" onclick="javascript:setTabContent(this.id)">
<span class="wrap">
<span class="innerWrap" style="WIDTH: 80px">
References</span></span></a>
</li>
<li>
<a id="Tab5" href="javascript:void(0)" onclick="javascript:setTabContent(this.id)">
<span class="wrap">
<span class="innerWrap" style="WIDTH: 80px">
Images</span></span></a>
</li>
<li>
<a id="Tab6" href="javascript:void(0);" onclick="javascript:setTabContent(this.id)">
<span class="wrap">
<span class="innerWrap" style="WIDTH: 80px">
Feedback</span></span></a>
</li>
</ul>
</div>
<div id="TabContainer">
</div>
</body>
</html>

Style.css

.TabStrip
{
 font: 11px Verdana, sans-serif;
 border-bottom: solid 1px #408000;
 margin-left: 1px;
}

.TabStrip li
{
display: inline;
}

.TabStrip li a
{
 padding-left: 10px;
 background: transparent url('img/TabLeft.png') 0px 0px no-repeat;
 line-height: 24px;
 color: #ffffff;
 text-decoration:none; 
}

.TabStrip li a .wrap
{
 color: #ffffff;
 font-weight:bold;
 padding-right: 10px;
 line-height: 24px; 
 background:transparent url('img/tabRight.png') right 0px no-repeat;
}

.TabStrip li a:hover
{
 color: #ffffff;
 text-decoration:underline;
}

.TabStrip li a .innerWrap
{
 line-height: 24px;
 background:transparent url('img/tabMiddle.png') 0px 0px repeat-x;
 text-align: center;

}

.TabStrip li a.selected
{
 padding-left: 10px;
 background: transparent url('img/TabLeftSelected.png') 0px 0px no-repeat;
 line-height: 24px;
  text-decoration:none;
}

.TabStrip li .innerWrap
{
 cursor: default;
}

.TabStrip li a.selected .wrap
{
 background-image:url('img/tabRightSelected.png');
 line-height: 24px;
 padding-right: 10px;
 color: #000000;
 font-weight:bold;
}

.TabStrip li a.selected .innerWrap
{
 background-image:url('img/tabMiddleSelected.png');
 padding-top: 0px;
}

You can download the images here:

Salaudeen Rajack

Salaudeen Rajack - Information Technology Expert with Two-decades of hands-on experience, specializing in SharePoint, PowerShell, Microsoft 365, and related products. He has held various positions including SharePoint Architect, Administrator, Developer and consultant, has helped many organizations to implement and optimize SharePoint solutions. Known for his deep technical expertise, He's passionate about sharing the knowledge and insights to help others, through the real-world articles!

7 thoughts on “Image tabs for the web sites

  • Thanks a lot Salaudeen !! Do you have any blogs on Silverlight WebParts ??

    Reply
  • Avinash,

    It depends. If you want to show this tabs only on one page, You can use CEWP. Otherwise go for Web Part!

    Reply
  • Should i add a CEWP in every site to get this effect on all sites ?

    Reply
  • Hi Salaudeen,

    Can you tell me where should i add this code please ? I am new to SharePoint

    Reply
  • Hi, can you post the css for this as well? The code shows bulleted entries without the css. Thanks.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *