jquery tabs

$(function(){
var tab_menu_li = $('.tab_menu li');
$('.tab_box div:gt(0)').hide();

tab_menu_li.mouseover(function(){
$(this).addClass('selected')
   .siblings().removeClass('selected');

var index = tab_menu_li.index(this);
$('.tab_box div').eq(index).show()
.siblings().hide();
}).hover(function(){
$(this).addClass('hover');
},function(){
$(this).removeClass('hover');
});
});

$(function(){
var banner_menu_li = $('.banner_menu li');

banner_menu_li.mouseover(function(){
$(this).addClass('selected')
   .siblings().removeClass('selected');

var index = banner_menu_li.index(this);
$('.banner_content div').eq(index).show()
.siblings().hide();
});
});



*{ margin:0; padding:0;}
body{ font:11px Verdana, Geneva, sans-serif; padding:10px;}
ul{list-style:none;}
img{border:none;}

.tab{ width:300px; margin-bottom:10px;}
.tab_menu{ height:1%; overflow:hidden;}
.tab_menu li{ float:left; padding:2px 10px; margin-right:1px; border:1px solid #fc0;border-bottom:none; cursor:pointer;}
.tab_box{ height:150px; border:1px solid #fc0; background:#ff6; overflow:hidden; }
.tab_box div{ padding:5px;}
.selected{ background:#fc0;}
.hidden{ display:none;}
.hover{ background:#f60; color:white;}

.banner{ border:1px solid #fc0; background:#ff6; width:800px; height:150px; position:relative; overflow:hidden;}
.banner_menu{position:absolute; bottom:5px; right:5px;}
.banner_menu li{ padding:0 5px; height:18px; line-height:18px; border:1px solid #fc0; float:left; display:block; margin-right:5px; cursor:pointer;}


<div class="tab">

<div class="tab_menu">
<ul>
<li class="selected"><span>xhtml</span></li>
<li><span>css</span></li>
<li><span>javascript</span></li>
</ul>
</div>
<div class="tab_box">
<div>xhtml</div>
<div>css</div>
<div>javascript</div>
</div>
</div>

<div class="tab">
<div class="tab_menu">
<ul>
<li class="selected"><span>JQuery</span></li>
<li><span>ThinkPHP</span></li>
<li><span>PHP MySQL</span></li>
</ul>
</div>
<div class="tab_box">
<div>JQuery</div>
<div>ThinkPHP</div>
<div>PHP MySQL</div>
</div>
</div>

<div class="banner">
<div class="banner_menu">
<ul>
<li class="selected">1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<div class="banner_content">
<div><a href="#"><img src="images/01.jpg" alt=""/></a></div>
<div><a href="#"><img src="images/02.jpg" alt=""/></a></div>
<div><a href="#"><img src="images/03.jpg" alt=""/></a></div>
</div>
</div>