ナビゲーションバー切り替え効果:
htmlコードは次のとおりです:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <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スタイルコードは次のとおりです:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | 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 サイトの他の関連記事を参照してください。