Jquery+css tab

. zt{width:98%;margin:10px Auto;}
. ZT ul{float:left; list-style-type:none;width:212px; overflow:visible}
. zt ul Li{float:left;width:106px;height : 35px; line-height:35px; Background:url (.. /images/nav_link.gif); Text-align:center;cursor:pointer}
. zt ul li.on{width:106px; height:35px; line-height : 35px; Background:url (.. /images/nav_current.gif); Text-align:center; Color: #fff; font-weight:bold; Cursor:pointer}
#content div{overflow:hidden;width:98%;margin:10px Auto;}
. con{width:98%;margin:10px Auto; Display:block}

<div class= "ZT" >
<ul><li class= "On" > Pushed items </li><li> handling push items </li></ul>
<div id= "Content" >
<div class= "Con" ><%=pust_list ()%></div>
<div style= " Display:none ">dsafasf</div>
</div>
</div>

$ (function () {
        $ ('. ZT li '). Click (function () {
            $ (this). addclass (' on '). Siblings (). Removeclass ();
            var i = $ ('. ZT li '). index (this);
            $ (' #content >div '). EQ (i). Show (). siblings (). Hide ();})