纯CSS实现tab选项卡

这个是通过锚点实现的，纯属自己写着玩，一般用不上...

<style type="text/css">
body,div,ul,li{margin:0; padding:0; font-size:12px;}
.tab_ul{ margin:10px auto 0; padding-left:20px; width:228px; height:31px; background:url(/uploads/allimg/100309/1_100309143554_1.gif) left bottom repeat-x #FCEDFF;border:1px solid #DBA4E8; border-bottom:0; overflow:hidden;}
.tab_ul li{ float:left; display:inline; margin:5px 0 0 5px; width:46px; height:26px;}
.tab_ul li a{ display:block;width:46px; height:26px; line-height:26px; text-align:center;font-size:12px; color:#000000; text-decoration:none;}
.tab_ul li a:hover{ background-image:url(/uploads/allimg/100309/1_100309143512_1.gif); color:#5F0082; font-weight:bold;}
.tabDiv{ margin:0 auto; width:248px; height:80px;border:1px solid #DBA4E8; border-top:0; overflow:hidden;}
.tabDiv ul{ margin:0 auto 0; padding-top:10px; width:218px; height:190px;list-style:none;}
.tabDiv ul li{ height:24px; text-align:right; color:#666666; font-size:12px;}
.tabDiv ul li a{ float:left; color:#333333;}
</style>
<ul class="tab_ul">
    <li><a href="#ul1">美食</a></li>
    <li><a href="#ul2">娱乐</a></li>
    <li><a href="#ul3">购物</a></li>
    <li><a href="#ul4">住宿</a></li>
</ul>
<div class="tabDiv">
    <ul id="ul1">
        <li><a href="#" _fcksavedurl="#">·渝信川菜(长安店)1</a>0.1公里</li>
        <li><a href="#" _fcksavedurl="#">·国际饭店星光旋转餐厅1</a>0.1公里</li>
    </ul>
    <ul id="ul2">
        <li><a href="#" _fcksavedurl="#">·三分三发的身份2</a>0.2公里</li>
        <li><a href="#" _fcksavedurl="#">·高度发给餐厅2</a>0.2公里</li>
    </ul>
    <ul id="ul3">
        <li><a href="#" _fcksavedurl="#">·渝信发是店)3</a>0.3公里</li>
        <li><a href="#" _fcksavedurl="#">·国际发的身份转餐厅3</a>0.3公里</li>
    </ul>
    <ul id="ul4">
        <li><a href="#" _fcksavedurl="#">·渝信川发是安店)4</a>0.4公里</li>
        <li><a href="#" _fcksavedurl="#">·国方式餐厅4</a>0.4公里</li>
    </ul>
</div>