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>

 

jQuery简单Tab选项卡制作,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。