jQuery: Stupid Way to Create Tabs

it is very stupid way to create jquery tabs…

the CSS code:

.product-tabs li a{
float: left;
display: block;
padding: 20px 0px;
width: 187px;
text-align: center;
font-size: 18px;
background: red;
border: 1px solid #fff;
margin-right: 10px;
font-weight: bold;
font-family: “GothamBold”;
color: #999999;
text-decoration: none;
}

.product-tabs li a.active{
background:white;
border: 1px solid #ccc;
color:#3a3f42;
border-bottom:none;
}

the HTML code:

<ul class=”product-tabs”>

<li><a id=”tab1″ href=”javascript:void(0);”>Tab Title 1</a></li>
<li><a id=”tab2″ href=”javascript:void(0);”>Tab Title 2</a></li>
<li><a id=”tab3″ href=”javascript:void(0);”>Tab Title 3</a></li>
<li><a id=”tab4″ href=”javascript:void(0);”>Tab Title 3</a></li>

</ul>

<div class=”content-tab isiTab1″>
content 1
</div>

<div class=”content-tab isiTab2″>
content 2
</div>

<div class=”content-tab isiTab3″>
content 3
</div>

<div class=”content-tab isiTab4″>
content 4
</div>

the jQuery code:

<script>
$slide = jQuery.noConflict();
function resetTabs()
{
//$().removeClass();
//$().addClass();

$slide(‘#tab1, #tab2, #tab3, #tab4 ‘).removeClass(‘active’);
}

function resetIsiTabs()
{
$slide(‘.isiTab1, .isiTab2, .isiTab3, .isiTab4 ‘).css({“display”:”none”});
}

$slide(document).ready(function(){

resetIsiTabs();
resetTabs();
$slide(‘#tab1’).addClass(‘active’);
$slide(‘.isiTab1’).css({“display”:”block”});
/*
$(‘.tab1, .tab2, .tab3, .tab4’).live(‘click’,function(){
resetIsiTabs();
resetTabs();
$(this)addClass(‘active’);
});
*/

$slide(‘#tab1’).live(‘click’,function(){
resetIsiTabs();
resetTabs();
$slide(this).addClass(‘active’);
$slide(‘.isiTab1’).css({“display”:”block”});
});

$slide(‘#tab2’).live(‘click’,function(){
resetIsiTabs();
resetTabs();
$slide(this).addClass(‘active’);
$slide(‘.isiTab2’).css({“display”:”block”});
});

$slide(‘#tab3’).live(‘click’,function(){
resetIsiTabs();
resetTabs();
$slide(this).addClass(‘active’);
$slide(‘.isiTab3’).css({“display”:”block”});
});

$slide(‘#tab4’).live(‘click’,function(){
resetIsiTabs();
resetTabs();
$slide(this).addClass(‘active’);
$slide(‘.isiTab4’).css({“display”:”block”});
});

});
</script>

 

 

<ul class=”product-tabs”>

<li><a id=”tab1″ href=”javascript:void(0);”>Tab Title 1</a></li>
<li><a id=”tab2″ href=”javascript:void(0);”>Tab Title 2</a></li>
<li><a id=”tab3″ href=”javascript:void(0);”>Tab Title 3</a></li>
<li><a id=”tab4″ href=”javascript:void(0);”>Tab Title 3</a></li>

</ul>

<div class=”content-tab isiTab1″>
content 1
</div>

<div class=”content-tab isiTab2″>
content 2
</div>

<div class=”content-tab isiTab3″>
content 3
</div>

<div class=”content-tab isiTab4″>
content 4
</div>