tab

tab.html

<style>
    * {margin:0;padding:0;list-style:none;}

    .Enix_tab_hd {width:300px;height:30px;_overflow:hidden;margin:20px 0px 0px 20px;border-bottom:1px solid #999;}
    .Enix_tab_hd a {float:left;height:29px;line-height:29px;padding:0px 10px;margin-left:10px;border:1px solid #999;border-bottom:0;background-color:#ccc;}
    .Enix_tab_hd a.on {_position:relative;height:30px;background-color:#fff;}

    .Enix_tab_bd {clear:both;margin-top:10px;margin-left:20px;width:300px;}
</style>

<div class="Enix_tab_hd">
    <a target="_blank" href="#">首页</a>
    <a target="_blank" href="#" class="on">搜索</a>
    <a target="_blank" href="#">商祥</a>
    <a target="_blank" href="#">其他</a>
</div>
<div class="Enix_tab_bd">
    <div class="Enix_tab_bd_item">
        tab 对应的内容
    </div>
    <!-- repeat Enix_tab_bd_item -->
</div>