漂亮的 tab 样式

 <div id="tabsJ">

                        <ul>

                            <!-- CSS Tabs -->

                            <li onclick="show_it(1)"><a href="moreDisaster.aspx?categoryId=1"><span>地震</span></a></li>

                            <li onclick="show_it(2)"><a href="moreDisaster.aspx?categoryId=3"><span>火灾</span></a></li>

                            <li onclick="show_it(3)"><a href="moreDisaster.aspx?categoryId=8"><span>交通事故</span></a></li>

                            <li onclick="show_it(4)"><a href="moreDisaster.aspx?categoryId=2"><span>水灾</span></a></li>

                            <li onclick="show_it(5)"><a href="moreDisaster.aspx?categoryId=7"><span>虫灾</span></a></li>

                            <li onclick="show_it(5)"><a href="moreDisaster.aspx?categoryId=4"><span>干旱</span></a></li>

                            <li onclick="show_it(5)"><a href="moreDisaster.aspx?categoryId=5"><span>冰雪</span></a></li>

                            <li onclick="show_it(5)"><a href="moreDisaster.aspx?categoryId=6"><span>飓风</span></a></li>

                        </ul>

 </div>

css样式：

/*- Menu Tabs J--------------------------- */

#tabsJ { clear:both;margin-top:5px;float:left;width:100%;background:#F4F4F4;font-size:93%;line-height:normal;/* border-bottom:1px solid #24618E;*/}

#tabsJ ul{margin:0;padding:3px 10px 0 50px;list-style:none;}

#tabsJ li {display:inline;margin:0;padding:0;}

#tabsJ a{float:left;background:url("../images/tableftJ.gif") no-repeat left top;margin:0;padding:0 0 0 5px;text-decoration:none;}

#tabsJ a span {float:left;display:block;background:url("../images/tabrightJ.gif") no-repeat right top;padding:5px 15px 4px 6px;color:#24618E;}

    /* Commented Backslash Hack hides rule from IE5-Mac \*/

#tabsJ a span {float:none;}

    /* End IE5-Mac hack */

#tabsJ a:hover span {color:#FFF;}

#tabsJ a:hover {background-position:0% -42px;}

#tabsJ a:hover span {background-position:100% -42px;}

#tabsJ #current a {background-position:0% -42px;}

#tabsJ #current a span {background-position:100% -42px;color:#FFF;}

/*- Menu Tabs J-====================-END ===========*/