ナビゲーションバー切り替え効果:
htmlコードは次のとおりです:
<ul id="tab"> <li class="fli">tab1</li> <li>tab2</li> <li>tab3</li> </ul> <p id="tab_con"> <p class="fp">aaaa</p> <p>bbbb</p> <p>cccc</p> </p>
cssスタイルコードは次のとおりです:
ul, li, p { padding: 0; margin: 0; } ul li { float: left; width: 100px; height: 30px; line-height: 30px; text-align: center; background-color: #fff; border: 1px #bbb solid; border-bottom: none; cursor: pointer; } ul li.fli { background-color: #ccc; color: red; } ul { overflow: hidden; zoom: 1; list-style-type: none; } #tab_con { width: 304px; height: 200px; } #tab_con p { width: 304px; height: 200px; display: none; border: 1px #bbb solid; border-top: none; } #tab_con p.fp { display: block; background-color: #ccc; } .tclass{ width: 100px; height: 30px; background: #000; }
jsコードは次のとおりです:
りー
以上がタブバーの切り替え効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。