ホームページ >ウェブフロントエンド >jsチュートリアル >JS CSS でタブメニューのスライド切り替えを実装します。
この記事の例では、JS CSS を使用してスライド切り替えタブ メニュー効果を実装する方法を説明します。皆さんの参考に共有してください。詳細は以下の通りです。
これは単純な JS CSS のスライド ドア特殊効果コードです。マウスをメニュー上でスライドすると、2 番目のメニューが自動的に切り替わります。スライド ドア効果は、比較的人気のある Web メニュー効果です。 , インターネット上ではよくこのようなメニューが見られます。このメニューは Firefox、IE8、および Chrome でテストされており、コードの互換性は問題なく使用できます。
実行中のエフェクトのスクリーンショットは次のとおりです:
オンライン デモのアドレスは次のとおりです:
http://demo.jb51.net/js/2015/js-css-move-cha-tab-menu-style-codes/
具体的なコードは次のとおりです:
<!doctype html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink" lang="zh_CN" xml:lang="zh_CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript"> var $=function(a,b){ var ID = document.getElementById(a); var OBJ= (b)?ID.getElementsByTagName(b):ID; return OBJ } var n=0; var tab = function(MENU,BODY){ var l = MENU.length; for(var i=0;i<l;i++){ MENU[i].onmouseover=function(a){ return function(){ MENU[n].className="label" BODY[n].style.display = "none"; MENU[a].className="label label-selected"; BODY[a].style.display = "block"; n=a; } }(i); } } </script> <style> body{font-family: "微软雅黑","SimSun","宋体","Arial Narrow";} #header,#main,#footer{width: 1050px;background: #F1F9D9;margin: 5px auto;} #header{height: 50px;} #main{height: auto;} #footer{height: 50px;} #menu{height: 36px;padding: 2px 0 0 0;} li{list-style: none;cursor: pointer;} .category{margin: 0;height: 35px;border-bottom: 1px solid #b5e2f3;text-align: center;} .label{border: 1px solid #b5e2f3;float: left;width: 100px;height: 25px;margin: 0 3px;background: #F1FEF3;padding: 9px 0 0 0;outline: 0;-moz-border-radius: 5px 5px 0 0;} .label-selected{background: #FFF;border-bottom: 1px solid #FFF;} #linksContent{margin-top: -1;height: 600px;padding: 10px;border: 1px solid #b5e2f3;border-top: 0;background: #FFF;} .link{float: left;width: 180px;display: block;margin: 10px 0;} </style> <title>myLinks</title> </head> <body> <div id="container"> <div id="header"></div> <div id="main"> <div id="menu"> <ul class="category"> <li class="label label-selected">在线学习</li> <li class="label">运动休闲</li> <li class="label">编程社区</li> <li class="label">文化娱乐</li> <li class="label">休息项目</li> <li class="label">人际往来</li> </ul> </div> <div id="linksContent"> <div class="category-1" style="display:block;"> <ul> <li class="link"><span>html学习</span></li> <li class="link"><span>编译原理</span></li> <li class="link"><span>人工智能</span></li> <li class="link"><span>算法设计</span></li> </ul> </div> <div class="category-2" style="display:none;"> <ul> <li class="link"><span>开车</span></li> <li class="link"><span>郊游</span></li> <li class="link"><span>音乐</span></li> </ul> </div> <div class="category-2" style="display:none;"> <ul> <li class="link"><span>MSDN</span></li> <li class="link"><span>编译原理</span></li> <li class="link"><span>科幻电影</span></li> <li class="link"><span>技术文档</span></li> </ul> </div> <div class="category-2" style="display:none;"> <ul> <li class="link"><span>java学习</span></li> <li class="link"><span>html学习</span></li> <li class="link"><span>编译原理</span></li> <li class="link"><span>人工智能</span></li> <li class="link"><span>算法设计</span></li> </ul> </div> <div class="category-2" style="display:none;"> <ul> <li class="link"><span>html学习</span></li> <li class="link"><span>编译原理</span></li> <li class="link"><span>人工智能</span></li> </ul> </div> <div class="category-2" style="display:none;"> <ul> <li class="link"><span>java学习</span></li> <li class="link"><span>html学习</span></li> <li class="link"><span>算法设计</span></li> </ul> </div> </div> </div> <div id="footer"></div> </div> <script> tab($("menu","li"),$("linksContent","div")); </script> </body> </html>
この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。