1，Html代码
1 <body> 2<div id="box"> 3 <ul id="tab_nav"> 4 <li class="nonblank">购买标书</li> 5 <li class="blank"></li> 6 <li class="nonblank">法授</li> 7 <li class="blank"></li> 8 <li class="nonblank">银行资质证明</li> 9 <li class="blank"></li>10 <li class="nonblank">查阅档案</li>11 <li class="blank"></li>12 <li class="nonblank">投标分工确认</li>13 <li class="blank"></li>14 <li class="nonblank">公章使用</li>15 <li class="blank"></li>16 <li class="nonblank">购买</li>17 </ul>18</div>19 </body>
2，CSS代码
<style type="text/css">#box{height: 300px;margin-top: 200px;margin-left: 200px;}.nonblank{float: left;list-style: none;border: 1px solid #999;height: 31px;line-height: 31px;width: 110px;text-align: center;background-color: #efeff7;font-size: 15px;font-weight: 600;cursor:pointer;}.blank{float: left;border:none;border-bottom:1px solid #999;width:5px;line-height:31px;height: 32px;margin:0;list-style: none;}</style>
3，JS代码
<script type="text/javascript" src="script/jquery-1.6.2.min.js"></script><script type="text/javascript">$(function () {$("li[class=nonblank]").each(function (index) {$(this).mouseover(function () {//$(this).css("backgroundColor", "red");}).click(function () {$("li[class=nonblank]").css("backgroundColor", "#efeff7");$("li[class=nonblank]").css("borderBottom", "1px solid #999");$(this).css("backgroundColor", "white");$(this).css("borderBottom", "none");}).mouseout(function () {//$("li[class=nonblank]").css("backgroundColor", "#efeff7");})})})</script>
4，效果图
