jQuery特效-点击弹出框或者下拉菜单
点击弹出框jQuery特效。具体效果是:点击按钮,会弹出框;再次点击,弹出框就会关闭。点击弹出框内区域是不会关闭的,点击其它地方就会关闭的。
这是一个不可多得的jQquery特效,速速收藏!
运行代码<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>简洁jQuery选项卡插件 - www.tonjay.com</title> <meta name="keywords" content="简洁jQuery选项卡插件 www.tonjay.com" /> <meta name="description" content="简洁jQuery选项卡插件 www.tonjay.com" /> </head> <style> * {font-family:Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Noto Sans CJK SC,WenQuanYi Micro Hei,Arial,sans-serif;margin:0;padding:0;} ul,li {list-style:none;} body {max-width:640px;margin:50px auto;} ul {display:table;text-align:center;width:100%;background:linear-gradient(#f5f5f5,#eee);border-radius:3px;line-height:40px;overflow:hidden;} li {display:table-cell;cursor:pointer;} li:not(:last-child) {border-right:1px solid rgba(0,0,0,0.05);} li:hover {background:linear-gradient(#eee,#e5e5e5);} li.active {background:linear-gradient(#444,#333);color:#fff;} .content-1,.content-2 {padding:40px;border:1px solid #eee;margin-top:10px;border-radius:3px;} .tab-2 {margin-top:50px;} </style> <body> <ul class="tab-1"> <li>TONJAY.COM</li> <li>TONJAY.COM</li> <li>TONJAY.COM</li> </ul> <div class="content-1"> <div class="content-item"> <p>This the one!鼠标点击切换</p> <p>From <a href="https://aihongxin.com">www.tonjay.com web前端资源网</a></p> </div> <div class="content-item"> <p>鼠标点击切换 This the two</p> <p>Frome <a href="https://aihongxin.com">web前端资源网 www.tonjay.com</a></p> </div> <div class="content-item"> <p>This the three!鼠标点击切换</p> <p>From <a href="https://aihongxin.com">www.tonjay.com web前端资源网</a></p> </div> </div> <ul class="tab-2"> <li>TONJAY.COM</li> <li>TONJAY.COM</li> </ul> <div class="content-2"> <div class="content-item"> <p>This the one 鼠标经过切换</p> <p>From <a href="https://aihongxin.com">www.tonjay.com web前端资源网</a></p> </div> <div class="content-item"> <p>鼠标经过切换 This the two</p> <p>Frome <a href="https://aihongxin.com">web前端资源网 www.tonjay.com</a></p> </div> </div> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script> $(function() { function Tab(tab,content,events){ $(tab).find("li:first").addClass("active"); $(content).find(".content-item").not(":first").hide(); $(tab).on(events,"li",function(){ $(this).addClass("active").siblings().removeClass("active"); var itemIndex = $(this).index(); $(content).find(".content-item").eq(itemIndex).show().siblings().hide(); }) } Tab(".tab-1",".content-1","click"); Tab(".tab-2",".content-2","mouseenter"); }) </script> </body> </html>