用jQuery 实现 Tab标签切换效果

        我们经常可以看到网页设计中使用Tab标签切换的方式来展示网页内容 . 下面介绍一个利用jQuery 实现 Tab标签切换效果 .

HTML代码:
<div id="hezuo" class="block hezuo">
    <div class="hezuo-list">
        <dl class="tab">
                <dt>
                    <a class="tab" href="#tab-1">合作官网</a>
                    <a class="tab" href="#tab-2">名人明星</a>
                    <a class="tab" href="#tab-3">合作媒体</a>
                </dt>
                <dd class="tab" id="tab-1">
                    <img src="images/ksfmrC_2.jpg" alt="ksfmrC_2" title="ksfmrC_2" />
                    <img src="images/bk801503.jpg" alt="bk801503" title="bk801503" />
                    <img src="images/btv-wlqw.jpg" alt="btv-wlqw" title="btv-wlqw" />
                </dd>
                <dd class="tab" id="tab-2">
                    <img src="images/0917midi-82x61.jpg" alt="0917midi" title="0917midi" />
                    <img src="images/0917shjazz-82x61.jpg" alt="0917shjazz" title="0917shjazz" />
                    <img src="images/air-supply-82x61.jpg" alt="air-supply" title="air-supply" />
                </dd>
                <dd class="tab" id="tab-3">
                    <img src="images/dongfang.jpg" alt="dongfang" title="dongfang" />
                    <img src="images/btv.gif" alt="btv" title="btv" />
                    <img src="images/anhui.jpg" alt="anhui" title="anhui" />
                </dd>
        </dl>
    </div>
</div>

JS代码:
<script type="text/javascript">
  $(document).ready(function(){

    $('a.tab').mouseover(function(){
        var tab = $(this).attr('href');
        $('dd.tab').hide();
        $(tab).css('display','block');
    });

    $('a.tab').click(function(){
        var tab = $(this).attr('href');
        $('dd.tab').css('display','none');
        $(tab).css('display','block');
        return false;
    });

  });
</script>

在线预览 : http://www.pecloud.cn/demo/jquery_tab/demo.html