| shempsall2009 |
11-30-2010 08:08 AM |
Javascript Problem
Please can somebody tell me why this don't work. It shows on site but the Tabs don't change.
Thanks.
HTML Code:
<style>
.tab-box {
border-bottom: 0px solid #DDD;
padding-bottom:3px;
}
.tab-box a {
border:0px solid #DDD;
color:#666666;
padding: 3px 15px;
text-decoration:none;
background-color: #eee;
}
.tab-box a.activeLink {
background-color: #fff;
border-bottom: 0;
padding: 3px 15px;
}
.tabcontent { border: 0px solid #ddd; border-top: 0;}
.hide { display: none;}
</style>
<div class="block">
<div class="blockhead">
<div class="tab-box">
<a href="javascript:;" class="tabLink activeLink" id="cont-1">Tab 1</a>
<a href="javascript:;" class="tabLink " id="cont-2">Tab 2</a>
<a href="javascript:;" class="tabLink " id="cont-3">Tab 3</a>
</div>
</div>
<div class="blockrow">
<div class="tabcontent padding All" id="cont-1-1">
This is content box one
</div>
<div class="tabcontent padding All hide" id="cont-2-1">
This is content box Two
</div>
<div class="tabcontent padding All hide" id="cont-3-1">
This is content box Three
</div>
</div>
<vb:literal>
<script type="text/javascript">
$(document).ready(function() {
$(".tabLink").each(function(){
$(this).click(function(){
tabeId = $(this).attr('id');
$(".tabLink").removeClass("activeLink");
$(this).addClass("activeLink");
$(".tabcontent").addClass("hide");
$("#"+tabeId+"-1").removeClass("hide")
return false;
});
});
});
</script>
</vb:literal>
|
More Information