技术标签 TAGS
专业技术精选
- 2020-03-20非常不错的骰子案例
- 2019-05-26vscode git and gitlens中文乱码问题
- 2011-12-14什么是网站制作的web标准
- 2011-12-14上海网站建设之六大不利优化因素
模拟标签切换Tab switch Json效果
浏览效果:
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>