functional tabs

[TiZo]

can anyone point me in the right direction >>>

i have been trying to find out how to code/script the same as the Chelsea FC web site. In particular I am looking at how to achieve the functionality named

Fixtures | Tickets | Memberships (just under main image of home page)

at http://www.chelseafc.com/page/Home/0,,10268,00.html

At the very least if someone could tell me the technical name of this type of code, I could do some of my own research.

At the moment i am really stuck and i dont know how to progress

any help would be great

[rajarajan2017]

This is just an image and div concepts. Three tabs are seperate images and under tab are the divs going to be hide/show based on the clicks on the tab. Using CSS and JavaScript you can achieve this. I will show you the partial coding used in that website, Just to understand

<script type="text/javascript">
function switchTab21883(tab, disableSlideShow, isTimeoutCall) {
if (disableSlideShow) {
disableSlideShow21883 = true;
}
if (disableSlideShow21883 &&
isTimeoutCall) {
return;
}
for (var x = 0; x < tabs21883.length; x++) {
if ($('#masterTabContentNoTabsMode21883_' + x + '.inDisplayTab').length > 0) {
document.getElementById('masterTabContentNoTabsMode21883_' + x ).style.display = "none";
}
}
if (!$('#masterTabContentNoTabsMode21883_' + tab + '.inDisplayTab').length > 0) {
for (var x = 0; x < tabs21883.length; x++) {                
tab = ((tab + 1) % tabs21883.length);
if ($('#masterTabContentNoTabsMode21883_' + tab + '.inDisplayTab').length > 0) {
break;                
} 
}
}          
if ($('#masterTabContentNoTabsMode21883_' + tab + '.inDisplayTab').length > 0) {
document.getElementById('masterTabContentNoTabsMode21883_' + tab).style.display = "block";
}
if(window['onTabSwitched21883_' + tab]) {
window['onTabSwitched21883_' + tab].call();
}
}         
</script>

<div class="masterTabsWrapper">
<ul id="masterTabContainer23735">
<li class="masterTabSelected0" id="masterTabList23735_0"><a href='javascript:switchTab23735(0, true)'>FIXTURES</a></li>
<li class="masterTab1" id="masterTabList23735_1"><a href='javascript:switchTab23735(1, true)'>Tickets</a></li>
<li class="masterTab2" id="masterTabList23735_2"><a href='javascript:switchTab23735(2, true)'>Membership</a></li>
</ul>

[TiZo]

WOW! thanksfor the quick reply .......... i will give it ago.......happy days :-)