jQuery1.3.1 Tab选项卡

   显然我不是对技术的狂热追捧者，我所面对的就是应用，面对的是客户，对于企业应用网站对于架构师来说，我相信无论用哪个方式去实现，效益是最重要的，当然其中包括了完美的用户体验，下面是一个基于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 >

 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 ;
}

 

这里只针对jquery的dom操作选择性的写了几个样式，用户可以按照自己的需求对卡盘效果进行美化。

 

 以上只是一个模板的卡盘效果，仅供参考！

  qq:313247313
 Email:rafx.z@hotmail.com
 新浪微博: Mr-sniper

转载于:https://www.cnblogs.com/rafx/archive/2011/06/08/jqueryTab.html