jquery 多次点击展示不同效果;导航栏点击出现三角提示框（旋转45°兼容）;纯CSS实现选项卡轮转切换效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>jquery 多次点击展示不同效果</title> <script src="jquery-1.11.3.min.js"></script> <style type="text/css"> *{ margin: 0px auto; height: 0px; } .dis{ width: 200px; height: 100px; background-color: antiquewhite; margin-top: 50px; } .dis_one{ width: 200px; height: 100px; background-color:aqua; margin-top: 50px; display: none; } .dis_two{ width: 200px; height: 100px; background-color:aquamarine; margin-top: 50px; display: none; } .dianji{ width: 100px; height: 40px; border-radius: 10px; line-height: 40px; text-align: center; background-color: coral; transition: 1s; } div{ margin-bottom: 20px; } </style> </head> <body> <div class="dis">111</div> <div class="dis_one">222</div> <div class="dis_two">333</div> <div class="dianji">点击</div> </body> <script type="text/javascript"> var i=0; $('.dianji').click(function(){ if(i==0){ $('.dis_one').css('display','block'); $('.dis').css('display','none'); $('.dianji').css('background-color','aqua'); //执行第一次点击的方法 } if(i==1){ $('.dis_one').css('display','none'); $('.dis_two').css('display','block'); $('.dianji').css('background-color','antiquewhite'); //执行第二次点击的方法 } if(i==2){ $('.dis_two').css('display','none'); $('.dis').css('display','block'); $('.dianji').css('background-color','coral'); //执行第三次点击的方法 } i++; }) </script> </html>
三角提示框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>jquery 三角提示框</title> <script src="jquery-1.11.3.min.js"></script> <style type="text/css"> *{ margin: 0px auto; height: 0px; } #nav{ width: 900px; height: 45px; background-color: aquamarine; border-bottom: 5px solid #ccc; margin-top: 100px; position: relative; z-index: -2; } .nav_div{ display: inline; height: auto; line-height: 45px; padding: 0px 23px 0px 23px; cursor: pointer; } /*上三角*/ .admin{ top:50px; right: -7px; width:150px; height:120px; display: none; position:absolute; background-color:#2C3E50; /*设置圆角*/ -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; } .admin_div{ width: 150px; height: 30px; line-height: 30px; text-align: center; font-size: 14px; color:aliceblue; } .admin_div:hover{ background-color: #15A78B; color:#fff; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; } .admin_sj{ width: 15px; height: 15px; top: -8px; right: 62px; z-index: -1; position: absolute; background-color:#2C3E50; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.060660171779821, M12=-1.0606601717798214, M21=1.0606601717798214, M22=1.060660171779821, SizingMethod='auto expand')"; } </style> </head> <body> <div id="nav"> <div class="nav_div">导航一</div> <div class="nav_div">导航一</div> <div class="nav_div">导航一</div> <div class="nav_div">导航一</div> <div class="nav_div">导航一</div> <div class="nav_div">导航一</div> <div class="nav_div">导航一</div> <div class="nav_div">导航一</div> <div class="nav_div nav_admin">admin <div class="admin"> <div class="admin_sj"></div> <div class="admin_div">网站信息</div> <div class="admin_div">修改信息</div> <div class="admin_div">会员中心</div> <div class="admin_div">退出登录</div> </div> </div> </div> </body> <script type="text/javascript"> $(".nav_admin").click(function(){ if($(".admin").css("display")=="none"){ $(".admin").show(); }else{ $(".admin").hide(); } }); </script> </html>
*-45°
transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.0606601717798225, M12=1.06066017177982, M21=-1.06066017177982, M22=1.0606601717798225, SizingMethod='auto expand')";
纯CSS实现选项卡轮转切换效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>纯CSS实现选项卡轮转切换效果</title> <link href="css/zzsc.css" rel="stylesheet" type="text/css"> <!--<script src="jquery-1.11.3.min.js" type="text/javascript"></script>--> <script type="text/javascript"> </script> <style type="text/css"> .box { width: 200px; height: 100px; border: 1px solid #ddd; overflow: hidden; } .list { width: 200px; height: 100px; line-height: 100px; background: #ddd; font-size: 60px; text-align: center; } .anchor { width: 200px; padding-top: 10px; text-align: right; } .click { display: inline-block; width: 20px; height: 20px; line-height: 20px; border: 1px solid #ccc; background: #f7f7f7; color: #333; font-size: 12px; font-weight: bold; text-align: center; text-decoration: none; } .click:hover { background: #eee; color: #345; } </style> </head> <body> <div class="box"> <div class="list" id="one">一</div> <div class="list" id="two">二</div> <div class="list" id="three">三</div> <div class="list" id="four">四</div> </div> <div class="anchor"> <a class="click" href="#one">1</a> <a class="click" href="#two">2</a> <a class="click" href="#three">3</a> <a class="click" href="#four">4</a> </div> </body> </html>
_____________
