tab标签的另一种写法

<div class="good"><ul><li><span>歌曲精选</span></li><li class="other"><span>MV精选</span></li></ul><div class="music_good"><p><span>丁当</span><a href="#">一个人不可能</a></p><p><span>陈楚生</span><a href="#">经过</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="#">最炫民族风</a></p><p><span>BY2</span><a href="#">你并不懂我</a></p><p><span>Justin</span><a href="#">Boyfriend</a></p><p><span>张杰</span><a href="#">逆战(枪战网游</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转换