change the css of selected and -non selected tabs on click

change the css of selected and -non selected tabs on click

have created the tab  user control and loading it into webpart

i tried to download jquery from the standard site for jquery

but i dont want  to change CSS given by designer

 so i have applied Class="Active" and display="block" in javascript function as foolows

but this is not good approach

 if(id=="hrefid1")//
            {
document.getElementById(id).setAttribute("class", "active");
document.getElementById("dvDtl1").style.display="block";
//tabs
document.getElementById("href2").removeAttribute("class");
document.getElementById("href3").removeAttribute("class");
//tabcontents
document.getElementById("dvDtl2").style.display="none";
document.getElementById("dvDtl3").style.display="none";








 

following is the usual html structure for tabs

<div >

<ul>

<li> <href> tab1

<li href>tab 2

<li href> tab 3>

</ul>

//contents using divs

<div1

</div>

 

how can i write jquery without having the requirement to hardcode the ids in javascript? if anyone has implented tabs . pls go on .

 

In short , i need to get the selected tab and  change the css  of selected and -non selected tabs onclick with jquery . how can i do that??