このタブ効果は、私がこれまでに見た中で最高ではありませんが、とても良いものです 。 <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>JavaScript タブ ページ (TAB) ブラウジング コントロールの推奨事項: DOMTab - JavaScript、DOMTab、TAB、タブ ページ、</title> <style type="text/css"> <!-- body { margin:0; padding:10px 5px; font-size:12px; font-family:verdana,arial,sans-serif,"宋体"; } #warp { width:600px; margin:0 auto; } /* TAB样式 开始 */ ul.domtabs { list-style: none; font-size: 0.9em; border-bottom: 1px solid #D55E12; margin: 0 0 20px 0; padding: 0 30px 2px 0; text-align: right; } ul.domtabs li { display: inline; margin: 0; } ul.domtabs a:link, ul.domtabs a:visited, ul.domtabs a:active, ul.domtabs a:hover { text-decoration: none; padding: 2px 5px 4px 5px; position: relative; bottom: 1px; color: #EA8544; } ul.domtabs li.active a:link, ul.domtabs li.active a:visited, ul.domtabs li.active a:active, ul.domtabs li.active a:hover { background:#fff; padding: 2px 10px 4px 10px; border: 1px solid #D55E12; border-bottom: 1px solid #fff; position: relative; bottom: 1px; color: #D55E12; font-weight:bold; } ul.domtabs a:hover { text-decoration: underline; color: #D55E12; } ul.domtabs li.active a:hover { text-decoration: none; } /* 前后跳转 */ ul.prevnext { list-style-type: none; margin: 0; padding: .5em 0; border-top: 1px solid #D55E12; } ul.prevnext li a { display: block; width: 6em; color: #FFF; background-color: #D55E12; padding: 2px 0; text-align: center; text-decoration: none; font:12px bold "verdana"; } ul.prevnext li a:hover { color: #FFF; background-color: #EA8544; } ul.prevnext .prev { float: left; } ul.prevnext .next { float: right; } h2.title {color:#D55E12;} --> </style> <div id="warp"> <div class="domtab doprevnext"> <ul class="domtabs"> <li> <a href="#tab1"></a>PHP/MySQL</li> <li> <a href="#tab2"></a>(X)HTML/CSS</li> <li> <a href="#tab3"></a>JavaScript</li> <li> <a href="#tab4"></a>アヤックス</li> </ul> <h2 class="title"> </h2>Homr.cn - エッセンス コードの DIV CSS スニペット<!-- TAB 1 --> <div> <h2> <a name="tab1" id="tab1"></a>PHP</h2> <p> </p>PHP (「PHP: Hypertext Preprocessor」、Hypertext Preprocessor の略語) は、広く使用されているオープンソースの多目的スクリプト言語で、HTML に埋め込むことができ、特に Web 開発に適しています。 <h2> <a name="mysql"></a>MySQL</h2> <p> </p>MySQL は、MySQL AB によって開発、リリース、サポートされている最も人気のあるオープン ソース SQL データベース管理システムです。 MySQL AB は、数人の MySQL 開発者によって設立された営利会社です。同社は、オープンソースの価値、手法、成功したビジネス モデルを組み合わせた第 2 世代のオープンソース企業です。 <p> <a href="#top"></a>メニューに戻る</p> </div> <!-- TAB 2 --> <div> <h2> <a name="tab2" id="tab2"></a>(X)HTML</h2> <p> </p>HTML 言語は、私たちが Web ページを構築するためのツールです。その登場から現在に至るまで、その仕様は継続的に改良され、その機能はますます強力になっています。ただし、まだ欠陥や欠点があり、ネットワーク上で絶えず変化するアプリケーション要件に適応できるように、より制御しやすく、柔軟性を高めるために、開発者が継続的に改良を続けています。 2000 年末、国際組織 W3C (World Wide Web Consortium) は、XHTML バージョン 1.0 のリリースを発表しました。 <p> </p>XHTML 1.0 は、XML ベースのアプリケーションを目的として、HTML 4.0 に基づいて最適化および改良された新しい言語です。 XHTML は拡張された HTML であり、そのスケーラビリティと柔軟性により、将来のネットワーク アプリケーションのより多くのニーズに適応できるようになります。 <h2> <a name="css"></a>CSS</h2> <p> </p>CSSとはCascading Style Sheetの略です。 「カスケード スタイル シート」と訳されます。 Web ページのスタイルを (拡張) 制御するために使用されるマークアップ言語で、Web ページのコンテンツからスタイル情報を分離できます。 <p> <a href="#top"></a>メニューに戻る</p> </div> <!-- TAB 3 --> <div> <h2> <a name="tab3" id="tab3"></a>JavaScript</h2> <p> </p>JavaScript は、HTML ドキュメントに埋め込むことができる新しい記述言語です。 JavaScript を使用すると、ネットワーク上でデータをやり取りすることなく、ユーザーの要求イベント (フォーム入力など) に応答することができるため、ユーザーがデータを入力するときに、そのデータをサーバーに渡す必要がありません。 ) の処理とそれを返す処理は、クライアント アプリケーションによって直接処理できます。 <p> <a href="#top"></a>メニューに戻る</p> </div> <script> /* DOMtab Version 3.1415927 Updated March the First 2006 written by Christian Heilmann check blog for updates: <a href="http://www.wait-till-i.com" target="_blank">http://www.wait-till-i.com free to use, not free to resell */ domtab={ tabClass:'domtab', // class to trigger tabbing listClass:'domtabs', // class of the menus activeClass:'active', // class of current link contentElements:'div', // elements to loop through backToLinks:/#top/, // pattern to check "back to top" links printID:'domtabprintview', // id of the print all link showAllLinkText:'show all content', // text for the print all link prevNextIndicator:'doprevnext', // class to trigger prev and next links prevNextClass:'prevnext', // class of the prev and next list prevLabel:'previous', // HTML content of the prev link nextLabel:'next', // HTML content of the next link prevClass:'prev', // class for the prev link nextClass:'next', // class for the next link init:function(){ var temp; if(!document.getElementById || !document.createTextNode){return;} var tempelm=document.getElementsByTagName('div'); for(var i=0;i<tempelm.length;i++){ if(!domtab.cssjs('check',tempelm[i],domtab.tabClass)){continue;} domtab.initTabMenu(tempelm[i]); domtab.removeBackLinks(tempelm[i]); if(domtab.cssjs('check',tempelm[i],domtab.prevNextIndicator)){ domtab.addPrevNext(tempelm[i]); } domtab.checkURL(); } if(document.getElementById(domtab.printID) && !document.getElementById(domtab.printID).getElementsByTagName('a')[0]){ var newlink=document.createElement('a'); newlink.setAttribute('href','#'); domtab.addEvent(newlink,'click',domtab.showAll,false); newlink.onclick=function(){return false;} // safari hack newlink.appendChild(document.createTextNode(domtab.showAllLinkText)); document.getElementById(domtab.printID).appendChild(newlink); } }, checkURL:function(){ var id; var loc=window.location.toString(); loc=/#/.test(loc)?loc.match(/#(\w.+)/)[1]:''; if(loc==''){return;} var elm=document.getElementById(loc); if(!elm){return;} var parentMenu=elm.parentNode.parentNode.parentNode; parentMenu.currentSection=loc; parentMenu.getElementsByTagName(domtab.contentElements)[0].style.display='none'; domtab.cssjs('remove',parentMenu.getElementsByTagName('a')[0].parentNode,domtab.activeClass); var links=parentMenu.getElementsByTagName('a'); for(i=0;i<links.length;i++){ if(!links[i].getAttribute('href')){continue;} if(!/#/.test(links[i].getAttribute('href').toString())){continue;} id=links[i].href.match(/#(\w.+)/)[1]; if(id==loc){ var cur=links[i].parentNode.parentNode; domtab.cssjs('add',links[i].parentNode,domtab.activeClass); break; } } domtab.changeTab(elm,1); elm.focus(); cur.currentLink=links[i]; cur.currentSection=loc; }, showAll:function(e){ document.getElementById(domtab.printID).parentNode.removeChild(document.getElementById(domtab.printID)); var tempelm=document.getElementsByTagName('div'); for(var i=0;i<tempelm.length;i++){ if(!domtab.cssjs('check',tempelm[i],domtab.tabClass)){continue;} var sec=tempelm[i].getElementsByTagName(domtab.contentElements); for(var j=0;j<sec.length;j++){ sec[j].style.display='block'; } } var tempelm=document.getElementsByTagName('ul'); for(i=0;i<tempelm.length;i++){ if(!domtab.cssjs('check',tempelm[i],domtab.prevNextClass)){continue;} tempelm[i].parentNode.removeChild(tempelm[i]); i--; } domtab.cancelClick(e); }, addPrevNext:function(menu){ var temp; var sections=menu.getElementsByTagName(domtab.contentElements); for(var i=0;i<sections.length;i++){ temp=domtab.createPrevNext(); if(i==0){ temp.removeChild(temp.getElementsByTagName('li')[0]); } if(i==sections.length-1){ temp.removeChild(temp.getElementsByTagName('li')[1]); } temp.i=i; // h4xx0r! temp.menu=menu; sections[i].appendChild(temp); } }, removeBackLinks:function(menu){ var links=menu.getElementsByTagName('a'); for(var i=0;i<links.length;i++){ if(!domtab.backToLinks.test(links[i].href)){continue;} links[i].parentNode.removeChild(links[i]); i--; } }, initTabMenu:function(menu){ var id; var lists=menu.getElementsByTagName('ul'); for(var i=0;i<lists.length;i++){ if(domtab.cssjs('check',lists[i],domtab.listClass)){ var thismenu=lists[i]; break; } } if(!thismenu){return;} thismenu.currentSection=''; thismenu.currentLink=''; var links=thismenu.getElementsByTagName('a'); for(i=0;i<links.length;i++){ if(!/#/.test(links[i].getAttribute('href').toString())){continue;} id=links[i].href.match(/#(\w.+)/)[1]; if(document.getElementById(id)){ domtab.addEvent(links[i],'click',domtab.showTab,false); links[i].onclick=function(){return false;} // safari hack domtab.changeTab(document.getElementById(id),0); } } id=links[0].href.match(/#(\w.+)/)[1]; if(document.getElementById(id)){ domtab.changeTab(document.getElementById(id),1); thismenu.currentSection=id; thismenu.currentLink=links[0]; domtab.cssjs('add',links[0].parentNode,domtab.activeClass); } }, createPrevNext:function(){ // this would be so much easier with innerHTML, darn you standards fetish! var temp=document.createElement('ul'); temp.className=domtab.prevNextClass; temp.appendChild(document.createElement('li')); temp.getElementsByTagName('li')[0].appendChild(document.createElement('a')); temp.getElementsByTagName('a')[0].setAttribute('href','#'); temp.getElementsByTagName('a')[0].innerHTML=domtab.prevLabel; temp.getElementsByTagName('li')[0].className=domtab.prevClass; temp.appendChild(document.createElement('li')); temp.getElementsByTagName('li')[1].appendChild(document.createElement('a')); temp.getElementsByTagName('a')[1].setAttribute('href','#'); temp.getElementsByTagName('a')[1].innerHTML=domtab.nextLabel; temp.getElementsByTagName('li')[1].className=domtab.nextClass; domtab.addEvent(temp.getElementsByTagName('a')[0],'click',domtab.navTabs,false); domtab.addEvent(temp.getElementsByTagName('a')[1],'click',domtab.navTabs,false); // safari fix temp.getElementsByTagName('a')[0].onclick=function(){return false;} temp.getElementsByTagName('a')[1].onclick=function(){return false;} return temp; }, navTabs:function(e){ var li=domtab.getTarget(e); var menu=li.parentNode.parentNode.menu; var count=li.parentNode.parentNode.i; var section=menu.getElementsByTagName(domtab.contentElements); var links=menu.getElementsByTagName('a'); var othercount=(li.parentNode.className==domtab.prevClass)?count-1:count+1; section[count].style.display='none'; domtab.cssjs('remove',links[count].parentNode,domtab.activeClass); section[othercount].style.display='block'; domtab.cssjs('add',links[othercount].parentNode,domtab.activeClass); var parent=links[count].parentNode.parentNode; parent.currentLink=links[othercount]; parent.currentSection=links[othercount].href.match(/#(\w.+)/)[1]; domtab.cancelClick(e); }, changeTab:function(elm,state){ do{ elm=elm.parentNode; } while(elm.nodeName.toLowerCase()!=domtab.contentElements) elm.style.display=state==0?'none':'block'; }, showTab:function(e){ var o=domtab.getTarget(e); if(o.parentNode.parentNode.currentSection!=''){ domtab.changeTab(document.getElementById(o.parentNode.parentNode.currentSection),0); domtab.cssjs('remove',o.parentNode.parentNode.currentLink.parentNode,domtab.activeClass); } var id=o.href.match(/#(\w.+)/)[1]; o.parentNode.parentNode.currentSection=id; o.parentNode.parentNode.currentLink=o; domtab.cssjs('add',o.parentNode,domtab.activeClass); domtab.changeTab(document.getElementById(id),1); document.getElementById(id).focus(); domtab.cancelClick(e); }, /* helper methods */ getTarget:function(e){ var target = window.event ? window.event.srcElement : e ? e.target : null; if (!target){return false;} if (target.nodeName.toLowerCase() != 'a'){target = target.parentNode;} return target; }, cancelClick:function(e){ if (window.event){ window.event.cancelBubble = true; window.event.returnValue = false; return; } if (e){ e.stopPropagation(); e.preventDefault(); } }, addEvent: function(elm, evType, fn, useCapture){ if (elm.addEventListener) { elm.addEventListener(evType, fn, useCapture); return true; } else if (elm.attachEvent) { var r = elm.attachEvent('on' + evType, fn); return r; } else { elm['on' + evType] = fn; } }, cssjs:function(a,o,c1,c2){ switch (a){ case 'swap': o.className=!domtab.cssjs('check',o,c1)?o.className.replace(c2,c1):o.className.replace(c1,c2); break; case 'add': if(!domtab.cssjs('check',o,c1)){o.className+=o.className?' '+c1:c1;} break; case 'remove': var rep=o.className.match(' '+c1)?' '+c1:c1; o.className=o.className.replace(rep,''); break; case 'check': var found=false; var temparray=o.className.split(' '); for(var i=0;i<temparray.length;i++){ if(temparray[i]==c1){found=true;} } return found; break; } } } domtab.addEvent(window, 'load', domtab.init, false); </script><!-- TAB 4 --> <div> <h2><a name="tab4" id="tab4">アヤックス</a></h2> <p>AJAX (非同期 JavaScript および XML、非同期 JavaScript および XML テクノロジー) は新しい言葉ですが、その意味合いは、以前から存在する 2 つの JavaScript 機能です。これら 2 つの機能は、これまで無視されてきましたが、Gmail、Google サジェスト、Google マップの登場後に有名になりました。 </p> <p>JavaScript の 2 つの機能は次のとおりです。 </p> <ul> <li>ページを再読み込みせずにサーバーにリクエストを送信します </li> <li>XML ファイルを解析して使用する</li> </ul> <p><a href="#top">メニューに戻る</a></p> </div> </div> </div> [Ctrl A すべて選択 注: 外部 Js を導入する必要がある場合は、 を実行するために更新する必要があります]
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
