jquery实现选项卡（两句即可实现）

<!DOCTYPE HTML>
<html>

<head>
       <meta charset="utf-8">
       <meta name="description" content="描述">
       <meta name="keywords" content="关键字">
       <title>布局</title>
       <script src="js/jquery-1.9.1.min.js"></script>
       <style>
           #ul {
               height: 30px;
               margin-bottom: 10px;
           }
           #ul li {
               height: 30px;
               line-height: 30px;
               list-style: none;
               padding: 0 15px;
               border: 1px solid #dfdfdf;
               float: left;
               cursor: pointer;
           }
           #ul .current {
               background: #f4f4f4 repeat;
               height: 30px;
           }
           .content {
               width: 300px;
               height: 200px;
           }
           .content div {
               width: 300px;
               height: 200px;
               border: 1px solid #dfdfdf;
               display: none;
           }
           .content .show {
               display: block;
           }
       </style>
       <script>
           $(function() {
               $('#ul>li').click(function() {
                   $(this).addClass('current').siblings().removeClass('current');
                   //根据li索引值确定显示哪个DIV
                   $('.content>div').eq($(this).index()).show().siblings().hide();
               });
           })
       </script>
   </head>

<body>
       <ul id="ul">
           <li class="current">title1</li>
           <li>title2</li>
           <li>title3</li>
       </ul>
       <div class="content">
           <div class="show">content111。。。</div>
           <div>content222。。。</div>
           <div>content333。。。</div>
       </div>
   </body>

</html>

巴特西

jquery实现选项卡（两句即可实现）

最新文章

热门文章