jquery tab mouseover 特效

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title>jQuery</title>
<style>
ul, li{list-style:none;}
#linTab ul li{float:left;width:50px;}
.clearBoth{clear:both;}
.on{display:block;}
.none{display:none;}
</style>
<script src="./jquery/jquery-1.7.1.min.js"></script>
<script>
$(document).ready(function(){
    $change_li = $(".linListTab li");
    $change_li.each(function(i){
        $(this).mouseover(function(){
            $(this).addClass("on").siblings().removeClass("on");
            $(".linBoxListContent dl").eq(i).show().siblings().hide();
        });
    });
});
</script>
</head>
<body>
<div id="linTab">

    <div class="linListTab">
        <ul>
            <li class="on"><a href="javascript:void(0)">第一</a></li>
            <li><a href="javascript:void(0)">第二</a></li>
            <li><a href="javascript:void(0)">第三</a></li>
        </ul>
        <br class="clearBoth" />
    </div>

    <div class="linBoxListContent">
        <dl>
            <dd>1111</dd>
        </dl>

        <dl class="none">
            <dd>2222</dd>
        </dl>

        <dl class="none">
            <dd>3333</dd>
        </dl>    
    </div>

</div>
</body>
</html>

jquery tab mouseover 特效,布布扣,bubuko.com

jquery tab mouseover 特效

上一篇:基于soapUI构建WebService测试框架


下一篇:jquery 只有二级下拉菜单