首页 > 代码库 > CSS+JQuery实现Tabs效果，点击更改背景色（不含图片）
CSS+JQuery实现Tabs效果，点击更改背景色（不含图片）
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="http://www.mamicode.com/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，效果图
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。