显然我不是对技术的狂热追捧者，我所面对的就是应用，面对的是客户，对于企业应用网站对于架构师来说，我相信无论用哪个方式去实现，效益是最重要的，当然其中包括了完美的用户体验，下面是一个基于jquery1.3.1的卡盘效果的应用，可以作为入门jquery的读者参考：
本文章为原创文章，转载请注明出处:http://www.cnblogs.com/rafx/
准备工作：
images（用于存放必要的图片）
css文件夹（用于存放必要的css）
jquery1.3.1.js库可以从jquery的官方网站获得：http://jquery.com/
HTML structure：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>New Document</title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<link href="css/jquery-1.3.1_tab.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="js/jquery-1.3.1.js"></script>
<script type="text/javascript"> $(document).ready(function(){ //等文档加载完毕执行脚本
$("div.hide").hide();
$("div.hide1").hide();
var $div_li=$("div.tab_menu ul li");//将变量的值付给前边变量
$div_li.click(function(){ //点击触发相应的函数操作（绑定点击事件）
$(this).addClass("selected") //给当前的这个元素添加css属性
.siblings().removeClass("selected");//去掉其他同辈元素的<li>元素的css属性
var index=$div_li.index(this);//获取对象
$("div.tab_box>div") // 得到选取子节点
.eq(index).show()//显示<li>元素对应的<div>元素
.siblings().hide();// hide<li>元素对应的<div>元素
}).hover(function(){ //新增函数光标换入划出效果
$(this).addClass("hover");
},function(){
$(this).removeClass("hover");
});
});
</script>
</head>
<body>
<div class="tab">
<div class="tab_menu">
<ul>
<li class="selected">
NO.1
</li>
<li>
NO.2
</li>
<li>
NO.3
</li>
</ul>
</div>
<div class="tab_box">
<div class="show">
Mr_sniper
</div>
<div class="hide">
Mr-wang
</div>
<div class="hide1">
Mr-Rk
</div>
</div>
</div>
</body>
</html>
<html>
<head>
<title>New Document</title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<link href="css/jquery-1.3.1_tab.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="js/jquery-1.3.1.js"></script>
<script type="text/javascript"> $(document).ready(function(){ //等文档加载完毕执行脚本
$("div.hide").hide();
$("div.hide1").hide();
var $div_li=$("div.tab_menu ul li");//将变量的值付给前边变量
$div_li.click(function(){ //点击触发相应的函数操作（绑定点击事件）
$(this).addClass("selected") //给当前的这个元素添加css属性
.siblings().removeClass("selected");//去掉其他同辈元素的<li>元素的css属性
var index=$div_li.index(this);//获取对象
$("div.tab_box>div") // 得到选取子节点
.eq(index).show()//显示<li>元素对应的<div>元素
.siblings().hide();// hide<li>元素对应的<div>元素
}).hover(function(){ //新增函数光标换入划出效果
$(this).addClass("hover");
},function(){
$(this).removeClass("hover");
});
});
</script>
</head>
<body>
<div class="tab">
<div class="tab_menu">
<ul>
<li class="selected">
NO.1
</li>
<li>
NO.2
</li>
<li>
NO.3
</li>
</ul>
</div>
<div class="tab_box">
<div class="show">
Mr_sniper
</div>
<div class="hide">
Mr-wang
</div>
<div class="hide1">
Mr-Rk
</div>
</div>
</div>
</body>
</html>
CSS code：
ul,li {
margin: 0px;
padding: 0px;
list-style-type: none;
}
.selected {
background-color: blue;
width: 50px;
height: 20px;
}
.hover {
background-color: red;
width: 50px;
height: 20px;
}
.tab {
width: 240px;
}
.tab_menu {
font-family: Verdana, "宋体", Arial;
font-size: 13px;
}
.tab_menu li {
float: left;
margin-left: 30px;
}
.tab_box {
width: 240px;
hight: 100px;
border: 1px solid #fff;
float: left;
}
.hide {
display: block;
height: 200px;
width: 300px;
float: left;
border: 2px solid;
}
.show {
height: 200px;
width: 300px;
float: left;
border: 2px solid blue;
}
.hide1 {
height: 200px;
width: 300px;
float: left;
border: 2px solid blue;
}
margin: 0px;
padding: 0px;
list-style-type: none;
}
.selected {
background-color: blue;
width: 50px;
height: 20px;
}
.hover {
background-color: red;
width: 50px;
height: 20px;
}
.tab {
width: 240px;
}
.tab_menu {
font-family: Verdana, "宋体", Arial;
font-size: 13px;
}
.tab_menu li {
float: left;
margin-left: 30px;
}
.tab_box {
width: 240px;
hight: 100px;
border: 1px solid #fff;
float: left;
}
.hide {
display: block;
height: 200px;
width: 300px;
float: left;
border: 2px solid;
}
.show {
height: 200px;
width: 300px;
float: left;
border: 2px solid blue;
}
.hide1 {
height: 200px;
width: 300px;
float: left;
border: 2px solid blue;
}
这里只针对jquery的dom操作选择性的写了几个样式，用户可以按照自己的需求对卡盘效果进行美化。
以上只是一个模板的卡盘效果，仅供参考！