jQuery简单Tab选项卡制作 

<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>tab选项卡</title>
<script src="jquery.js"></script>
<script>
$(function(){
    var ali = $('.tabTitle ul li');
    var aDiv = $('.tabContent div');
    var timeId = null;
    ali.mouseover(function() {
        //setTimeout()的作用是延迟某一段代码的执行
        var _this = $(this);
        timeId = setTimeout(function(){
            var index = _this.index();
            _this.addClass('current').siblings().removeClass('current');
            aDiv.eq(index).show().siblings().hide();
        },300);
    }).mouseout(function(){
        //clearTimeout的作用是清除定时器
        clearTimeout(timeId);
    });
});
</script>
<style>
*{padding:0;margin:0;}
body{margin:50px;}
li{list-style: none;}
.tabTitle ul{overflow: hidden;_height:1px;}
.tabTitle ul li{float:left; border:1px solid #abcdef; height: 30px; line-height: 30px; padding:0 15px; margin-right:3px; cursor:pointer;}
.tabContent div{border:1px solid #f60; width: 300px; height: 100px; padding:10px;}
.hide{display: none;}
.current{background: #abcdef; color: #fff;}
</style>
</head>
<body>
    <!-- 这里是标签标题 -->
    <div class="tabTitle">
        <ul>
            <li class="current">xhtml</li>
            <li>css</li>
            <li>jquery</li>
        </ul>
    </div>
    <!-- 这里是内容 -->
    <div class="tabContent">
        <div>xhtml的内容</div>
        <div class="hide">css的内容</div>
        <div class="hide">jQuery的内容</div>
    </div>
</body>
</html>

 

posted @ 2014-04-13 16:38  little fly  阅读(242)  评论(0)    收藏  举报