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转换