码迷,mamicode.com
首页 > Web开发 > 详细

jQuery 实现tab标签实例

时间:2018-06-07 15:39:15      阅读:239      评论:0      收藏:0      [点我收藏+]

标签:python

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>     <style>         .hide{             display: none;         }         .menu{             height: 38px;             background-color: #eeeeee;             line-height: 38px;         }         .menu .menu-item{             float: left;             border-right: 1px solid red;             padding: 0 5px;             cursor: pointer;         }         .active{             background-color: blue;         }         .content{             min-height: 100px;             border: 1px solid #eeeeee;         }     </style> </head> <body>     <div style="width: 700px;margin: 0 auto">         <div class="menu">             <div class="menu-item active" a="1">菜单一</div>             <div class="menu-item"a="2">菜单二</div>             <div class="menu-item" a="3">菜单三</div>         </div>         <div class="content">             <div b="1">内容一</div>             <div class="hide" b="2">内容二</div>             <div class="hide" b="3">内容三</div>         </div>     </div>     <script src="jquery-1.12.4.js"></script>     <script>         $('.menu-item').click(function () {             $(this).addClass('active').siblings().removeClass('active')             var target = $(this).attr('a')             $('.content').children("[b='"+ target+"']").removeClass('hide').siblings().addClass('hide')         })     </script> </body> </html>


jQuery 实现tab标签实例

标签:python

原文地址:http://blog.51cto.com/1662659/2125984

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!