首页 > 代码库 > jQuery-简单选项卡

jQuery-简单选项卡

2024-07-18 06:17:57   217人阅读

 1 <!DOCTYPE html> 2 <html> 3 <head> 4     <title>选项卡</title> 5     <meta http-equiv="content-type" content="text/html" charset="utf-8" accesskey=""/> 6     <script type="text/javascript" src="jquery-1.8.3.js"></script> 7     <style type="text/css"> 8         body,div,ul,li{ 9             margin: 0;10             padding: 0;11         }12         ul{13             width: 405px;14             margin: auto;15             overflow: hidden;16         }17         li{18             list-style: none;19             float: left;20             width: 100px;21             height: 30px;22             line-height: 30px;23             text-align: center;24             border: 1px solid #848484;25             border-right: none;26             overflow: hidden;27             cursor: pointer;28         }29         li:first-child{30             border-bottom: 1px solid #fff;31         }32         li:last-child{33             border-right: 1px solid #848484;34         }35         #wrap{36             width: 403px;37             margin: 70px auto;38             text-align: center;39             position: relative;40          }41         #wrap div{42             position: absolute;43             text-align: center;44             width: 100%;45             height: 200px;46             line-height: 100px;47             display: none;48             border: 1px solid #848484;49             border-top: none;50          }51         #wrap div:first-of-type{52             display: block;53         }54     </style>55 </head>56 <body>57 <div id="wrap">58 <ul>59     <li name="one"> 许嵩</li>60     <li name="two">周杰伦</li>61     <li name="three">林俊杰</li>62     <li name="four">陈奕迅</li>63  </ul>64 <div name="one" dianji="one">庐州月</div>65 <div name="two" dianji="two">东风破</div>66 <div name="three" dianji="three">江南 曹操</div>67 <div name="four" dianji="four">十年 浮夸</div>68 </div>69 <script type="text/javascript">70     $("li").on("click",function(){71         $("#wrap div[name!="+$(this).attr("name")+"]").fadeOut(1000);72         $("#wrap div[name="+$(this).attr("name")+"]").fadeIn(1000);73         $("#wrap li[name!="+$(this).attr("name")+"]").css({"border-bottom-color":"#848484"});74         $("#wrap li[name="+$(this).attr("name")+"]").css({"border-bottom-color":"#fff"});75     })76 </script>77 </body>78 </html>

 


联系
我们