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'am the content from Hiddent div 1!!! </div>
<div id="Content-Tab2" style="display: none">
I'am the content from Hiddent div 2!!! </div>
<div id="Content-Tab3" style="display: none">
I'am the content from Hiddent div 3!!! </div>
<div id="Content-Tab4" style="display: none">
I'am the content from Hiddent div 4!!! </div>
<div id="Content-Tab5" style="display: none">
I'am the content from Hiddent div 5!!! </div>
<div id="Content-Tab6" style="display: none">
I'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:
Thanks a lot Salaudeen !! Do you have any blogs on Silverlight WebParts ??
Avinash,
It depends. If you want to show this tabs only on one page, You can use CEWP. Otherwise go for Web Part!
Should i add a CEWP in every site to get this effect on all sites ?
Hi Salaudeen,
Can you tell me where should i add this code please ? I am new to SharePoint
It can be used in Any of the ASPX/HTML pages or even in Content Editor web part!
Hi, can you post the css for this as well? The code shows bulleted entries without the css. Thanks.
CSS Code provided!