jQuery+CSS怎么实现的标签页效果

小编给大家分享一下jQuery+CSS怎么实现的标签页效果，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

CSS代码：

#tabs{   width:600px;   height:250px;   background:white;   margin:20px; } #tabs ul{   float:left;   margin:20px 0 0 20px;   padding:0; } #tabs li{   width:80px;   height:40px;   line-height:40px;   display:inline-block;   text-align:center;   border-bottom:1px solid grey;   border-top-left-radius:5px;   border-top-right-radius:5px;   background:#eeeeee;   position:relative;   top:1px; } #tabs li:hover{   color:#aaaaaa;   cursor:pointer; } .items{   width:560px;   height:175px;   font-size:16px;   text-align:center;   border:1px solid grey;   float:left;   margin-left:20px; }

jQuery代码：

$(document).ready(function(){   $("li").bind("click",function(){     $(".items").hide();     $("#"+$(this).attr("name")).show();     $("li").css({       "border-top":"1px solid white",       "border-left":"1px solid white",       "border-right":"1px solid white",       "border-bottom":"1px solid grey",       "background":"#eeeeee"     });     $(this).css({       "border-top":"1px solid grey",       "border-left":"1px solid grey",       "border-right":"1px solid grey",       "border-bottom":"1px solid white",       "background":"white"     });   });   $("li:first-child").click(); });

HTML部分代码：

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <div id="tabs">   <ul>     <li name="lst1">标签1</li>     <li name="lst2">标签2</li>     <li name="lst3">标签3</li>     <li name="lst4">标签4</li>   </ul>   <div class="items" id="lst1">内容1</div>   <div class="items" id="lst2">内容2</div>   <div class="items" id="lst3">内容3</div>   <div class="items" id="lst4">内容4</div> </div>

这里使用在线HTML/CSS/JavaScript前端代码调试运行工具：http://tools.jb51.net/code/WebCodeRun，测试运行效果如下：

以上是“jQuery+CSS怎么实现的标签页效果”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！