用jquery的siblings来实现tab选项卡功能

<
html>

<
head>

<
meta http-equiv="
Content-Type"
content="
text/html
charset=utf-8"
/>

<
title>
Tab选项卡功能的实现<
/title>

<
style type="
text/css"
>

body
{ font-size:12px
}
ul
{ margin:0px
padding:0px
list-style:none
}

#title li
{ float:left
width:80px
height:40px
line-height:40px
text-align:center
border:1px solid
#f00
cursor:pointer
margin-right:5px
}

#title li.hover
{ background-color:
#CCC
color:
#fff }

#main li img
{ width:500px
height:300px
}

#main li
{ display:none
}

#main li.hover
{ display:block
}
.clear
{ clear:both
}
<
/style>

<
script type="
text/javascript"
src="
http://www.K88.NET/js/jquery.js"
>
<
/script>

<
script type="
text/javascript"
>

/*
jquery Tab选项卡功能的实现
来源：www.K88.NET
作者：wangsdong

*/
$(function()
{
$("

#title >
li"
).each(function(index)
{
$(this).bind('click',function()
{
$(this).addClass('hover').siblings().removeClass('hover')

$('
#main').find('li').eq(index).addClass('hover').siblings().removeClass('hover')

})

})

})

<
/script>

<
/head>

<
body>

<
ul id="
title"
>

<
li class="
hover"
>
标题1<
/li>

<
li>
标题2<
/li>

<
li>
标题3<
/li>

<
/ul>

<
div class="
clear"
>
<
/div>

<
ul id="
main"
>

<
li class="
hover"
>
<
img src=http://www.aspbc.com/Index/showtech/id/"
a.jpg"
/>
<
/li>

<
li>
<
img src=http://www.aspbc.com/Index/showtech/id/"
b.jpg"
/>
<
/li>

<
li>
<
img src=http://www.aspbc.com/Index/showtech/id/"
c.jpg"
/>
<
/li>

<
/ul>

<
/body>

<
/html>