<div class="good"><ul><li><span>歌曲精選</span></li><li class="other"><span>MV精選</span></li></ul><div class="music_good"><p><span>丁當(dāng)</span><a href="#">一個人不可能</a></p><p><span>陳楚生</span><a href="#">經(jīng)過</a></p><p><span>Ella</span><a href="#">壞女孩</a></p><p><span> 楊冪</span><a href="#">有點舍不得</a></p><p><span>羅志祥</span><a href="#">不具名的悲傷</a></p></div><div class="music_good"><p><span>許嵩</span><a href="#">胡蘿卜須</a></p><p><span>鳳凰傳奇</span><a href="#">最炫民族風(fēng)</a></p><p><span>BY2</span><a href="#">你并不懂我</a></p><p><span>Justin</span><a href="#">Boyfriend</a></p><p><span>張杰</span><a href="#">逆戰(zhàn)(槍戰(zhàn)網(wǎng)游</a></p></div><div class="pic"><img src="img/tab_bar_bg.gif" width="7" height="94" alt="s" /></div></div> #main .left .good { height: 155px; width: 187px; margin-right: auto; margin-left: auto; margin-top: 0px; overflow: hidden; }#container #main .left .good ul { font-weight: 500; font-size: 12px; color: #8F8F8F; height: 26px; border-bottom: 1px solid #E2E2E2; }#container #main .left .good ul li { float: left; background: url(../img/tab_bg.gif) no-repeat left 0px; padding-left: 15px; line-height: 26px; height: 26px; font-weight: bold; }#container #main .left .good ul li span { background: url(../img/tab_bg.gif) no-repeat right 0px; display: block; padding-right: 15px; cursor: pointer; }#container #main .left .good ul .other span { background: url(../img/tab_bg.gif) right -26px; display: block; line-height: 21px; height: 21px; }#container #main .left .good ul .other { background: url(../img/tab_bg.gif) left -26px; line-height: 21px; height: 21px; margin-top: 4px; font-weight: normal; }#container #main .left .good .music_good { height: 101px; clear: both; margin-top: 25px; background: url(../img/tab_li_bg.gif) no-repeat left; width: 170px; float: left; }#container #main .left .good .music_good p { padding-left: 20px; padding-bottom: 8px; }#container #main .left .good .music_good p span { float: right; }

?

$('.music_good:gt(0)').hide();var good_music = $('.good ul li');good_music.hover(function() {$(this).removeClass().siblings().addClass('other');var good_music_index = good_music.index(this);$('.music_good').eq(good_music_index).show().siblings('.music_good').hide();});

?另一種不錯的tab轉(zhuǎn)換

轉(zhuǎn)載于:https://www.cnblogs.com/bingrong/p/3326444.html

總結(jié)

以上是生活随笔為你收集整理的tab标签的另一种写法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。