$(document).ready(function(){

var last_target_id = “first”;

$(“.tabs > li”).click(function(e){

$(“#” + last_target_id).removeClass(“active”);
$(“div.” + last_target_id ).css(“display”, “none”);

$(“#” + e.target.id).addClass(“active”);
$(“div.” + e.target.id).fadeIn();

last_target_id = e.target.id;
return null;
});
});

The css and html is same

}

(just remove the overflow: hidden;)

How about I change the tab content to image?
I changed but it was not clickable..
It only can click on the edge(the li only)

May u help me to overcome this problem?
Thank you.

I WANT DYNAMIC STUFF so here we go:

HTML:
——————————-

tab1
tab2
tab3

test 1

test 2

test 3

——————————-

CSS:
——————————-
#tabs {
display: block;
border: 0;
padding: 0;
width: 80%;
}

#tabs ul#tabsnav, #tabs ul#tabscontent {
display: block;
margin: 0;
padding: 0;
list-style-type: none;
}

#tabs ul#tabsnav {
height: 25px;
}

#tabs ul#tabscontent {
border: 1px solid #d0ccc9;
}

#tabs ul#tabsnav li {
display: block;
position: relative;
float: left;
padding: 3px 5px 3px 5px;
margin: 4px 2px -1px 4px;
font-size: 12px;
line-height: 14px;
height: 14px;
background-color: #efefef;
border: 1px solid #d0ccc9;
color: #898989;
cursor: pointer;
}

#tabs ul#tabsnav li.active {
padding: 8px 5px 3px 5px;
margin: 0 2px -1px 4px;
background-color: #ffffff;
color: #5f95ef;
border-bottom: none;
}

#tabs ul#tabscontent li {
display: none;
margin: 0;
padding: 4px 8px 12px 8px;
}

#tabs ul#tabscontent li.active {
display: block;
}
——————————-

JAVASCRIPT:
——————————-
$(document).ready(function() {
$(“#tabs ul#tabsnav > li”).each(function(index) {
$(this).click(function() {
$(“#tabs ul#tabsnav > li”).each(function(index2) {
if (index == index2) {
// you clicked this tab
$(this).addClass(“active”);
} else {
$(this).removeClass(“active”);
}
});
$(“#tabs ul#tabscontent > li”).each(function(index2) {
if (index == index2) {
$(this).fadeIn(400);
} else {
$(this).hide();
}
});
});
});
});
——————————-

This js code defines a click function for every tab, then iterates each tab again inside the click function to set active classes. then does the same with content.