前端之Tab切换
一、代碼
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Tab欄目仿寫</title><style>*{padding: 0;margin: 0;list-style: none}.container{margin: 200px 100px;border: 1px solid #015293;width: 70%;height: 400px;}.side{width: 20%;margin: 10px 10px;float: left;}#tab li{padding: 20px 0;margin-top: 10px;color: #015293;background: #ECF8F8;border-radius: 15px;font-weight: bold;text-align: center;cursor: pointer;position: relative;}/* #tab li:hover{color: #FFF;background: #015293;} */.hov:after{content: '';border: 15px solid transparent;border-left: 15px solid #015293;position: absolute;top: 15px;right: -26px;}#content{border: 1px solid #E8E8E8;width: 75%;height: 360px;margin: 20px 10px;float: left;}#content>div{display: none;}/* .tex{display: none;} */.nohide{display: block !important;font-weight: bold;}.nohide p{text-indent: 2em;}</style> </head> <body> <div class="container"><div class="side"><ul id="tab"><li>走進焦作</li><li>要聞動態</li><li>政務公開</li><li>政務服務</li><li>政民互動</li></ul></div><div id="content"><div class="nohide"><p>1</p></div><div class="tex"><p>2</p></div><div class="tex"><p>3</p></div><div class="tex"><p>4</p></div><div class="tex"><p>5</p></div></div> </div> <script>var tabs=document.getElementById('tab').getElementsByTagName('li');var sen=document.getElementById('content').getElementsByTagName('div');for (var i=0;i<tabs.length;i++){tabs[i].onmouseover=function(){change(this);}}function change(obj){for (var i=0;i<tabs.length;i++){if(tabs[i]===obj){tabs[i].className="hov";tabs[i].style.color="#FFF";tabs[i].style.background="#015293";sen[i].className="nohide";}else{tabs[i].style.color="#015293";tabs[i].style.background="#ECF8F8";tabs[i].className='';sen[i].className='';}}} </script> </body> </html>二、效果
總結
- 上一篇： JavaScript实现轮播图
- 下一篇： Python实现全民K歌歌曲下载