模拟标签切换Tab switch Json效果

2010-12-30 15:11:43 by 【6yang】, 190 visits, 收藏 | 返回

浏览效果:

http://www.6yang.net/myjavascriptlib/tabJquery/#

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>模拟标签切换Tab switch Json效果</title>
<link href="../css/reset.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
//<![CDATA[
jQuery(function($){
         //加载页面

    function loadContent(){
        var url = "ajaxdata.php";
        var oData = {'tab' : "TV"};
        $.post(url, oData, function(json){
            if(json.status == 'successful'){
                $("#Container").html(json.data);
            }           
        }, "json");
    };   
    loadContent();   
    $("#Tab li").bind('click', function(){
        var _self = $(this);
        var strTab = _self.attr("id");
        var    oData = {'tab' : strTab};
        var url = 'ajaxdata.php';
        if(_self.hasClass('current')){
            return;
        }
        $.post(url, oData, function(json){  
            if(json.status == 'successful'){
                $("#Container").html(json.data);
                _self.addClass("current").siblings().removeClass("current");
            }
        }, "json");   
    });
   
});
//]]>
</script>
<style type="text/css">
/*************Main Box****************/
.MainBox{
    border:1px solid #ccc;
    padding:15px;
    margin:15px auto;
    width:500px;
    -moz-border-radius:6px;
    -moz-border-bottom-colors:#eee #ddd #ccc #bbb #aaa #999 #777 #888;
    -moz-border-right-colors:#eee #ddd #ccc #bbb #aaa #999 #777 #888;
}
.MainBox h1.title{
    padding:0 0 15px 0 ;
}
.Tab{
    overflow:hidden;
    width:500px;
}
.Tab li{
    float:left;
}
.Tab li a{
    display:block;
    padding:5px 12px;
}
.Tab li.current a{
    background:#005EAC;
    color:#fff;
    -moz-border-radius:5px;
}
.Container{
    padding:15px 0;
    font-size:14px;
    color:#f30;
}
</style>
</head>
<body>
<div class="MainBox" id="MainBox">
    <h1 class="title">模拟标签切换Tab switch Json效果</h1>
    <div class="Tab" id="Tab">
        <ul><li class="current" id="TV"><a href="#">TV</a></li><li id="Movies"><a href="#">Movies</a><li id="Music"><a href="#">Music</a></li></ul>
    </div>
    <div class="loading"></div>
    <div class="Container" id="Container">
        loading...
    </div>
</div>

 

</body>
</html>

分享到:
share

    图片原图

    loading

    loading