1.效果
2.實現代碼
2.1 整體代碼 圖
2.2 css
| *{ padding:0; list-style:none; margin:0; } .years{ width:120px; height:30px; border-radius:4px; overflow:hidden; background-color:#55454f; font-size:0; margin:50px auto 0; color:#c1bebf; } .years li{ width:33.3%; display:inline-block; vertical-align:top; font-size:16px; text-align:center; line-height:30px; height:100%; cursor:pointer; } .years li:nth-child(2){ border-right:1px solid #6a6172; border-left:1px solid #6a6172; box-sizing:border-box; } .years li:first-child{ background-color:#e68133; } |
2.3 html
| <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>時間切換</title> <script type="text/javascript" src="js/jquery-2.1.4.min.js" ></script> <link rel="stylesheet" href="css/style.css" /> <script> $(function(){ //日月周 切換 var timeFlag=document.querySelectorAll(" .years li"); Array.from(timeFlag).forEach(function(val,index){ val.addEventListener('click',function(){ Array.from(timeFlag).forEach(function(vals,indexs){ vals.style.backgroundColor="#55454f"; vals.style.color="#c1bebf"; }) this.style.backgroundColor="orange"; this.style.color="white"; alert("我的選擇："+index+" ，這裏加載事件") }); }) }); </script> </head> <body> <ul class="years"> <li>日</li> <li>周</li> <li>月</li> </ul> </body> </html> |
3. 發出請求
