【JQuery实例】--标签页效果
2015-12-12 08:28
477 查看
现在轮到第3个例子了，它的整体页面如下：
图中第一组的标签是静态的，显示的内容直接加载。而第二类是从后台调出内容或者整个页面来显示的，需要用到AJAX，所以没有写完整，现在只是给一个框架。
第一组，HTML代码：
<span style="font-family:KaiTi_GB2312;font-size:18px;"><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>JQuery实例四--标签页效果（内容是静态的）</title>
<link href="selectTab.css" rel="stylesheet" />
<script src="jquery.js"></script>
<script src="selectTab.js"></script>
</head>
<body>
<ul id="tabfirst">
<li class=" tabin">标签1</li>
<li>标签2</li>
<li>标签3</li>
</ul>
<div class="contentin contentfirst">我是内容1</div>
<div class =" contentfirst">我是内容2</div>
<div class=" contentfirst">我是内容3</div>
</body>
</html>
</span>
第二组HTML代码：
<span style="font-family:KaiTi_GB2312;font-size:18px;">HTML：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>JQuery实例四--标签页效果（内容是动态加载的）</title>
<link href="selectTab.css" rel="stylesheet" />
<script src="jquery.js"></script>
<script src="selectTab.js"></script>
</head>
<body>
<ul id="tabsecond">
<li class=" tabin">装入完整页面</li>
<li>装入部分页面</li>
<li>从远程获取数据</li>
</ul>
<div id="contentsecond">test</div>
</body>
</html>
</span>
他们公用一个CSS：
<span style="font-family:KaiTi_GB2312;font-size:18px;">body {
}
/*下面的饿两个，表示把标签横排显示，并赋颜色*/
ul,li{
margin:0;
padding:0;
list-style:none;
}
#tabfirst li{
float:left ;
background-color :#868686;
color:white ;
padding:5px;/*设置字与字之间的距离，内边距*/
margin-right:2px;/*设置外边距*/
/*让所有的的标签框有一个边框，并让边框为白色,让标签和内容不紧挨着*/
border:1px solid white;
}
#tabfirst li.tabin{/*只在一个div上设置这个属性，然后再JS中动态给其他的添加*/
background-color :#6E6E6E;
border:1px solid #6E6E6E;/*让边框颜色和内容颜色一样，显示当前标签和当前内容是对应的*/
}
/*设置内容样式:竖直在标签下面*/
div.contentfirst{
clear:left ;
background-color :#6E6E6E;
color:white ;/*字体颜色*/
/*设置内容的宽高*/
width:300px;
height:100px;
padding:10px;
display:none;/*先隐藏内容框*/
}
div.contentin{/*只在一个div上设置这个属性，然后再JS中动态给其他的添加*/
display:block ;/*显示内容框*/
}
/*对selectTab1页面的样式编写*/
#tabsecond li{
float:left ;
background-color :white ;
color:blue ;
padding:5px;/*设置字与字之间的距离，内边距*/
margin-right:2px;/*设置外边距*/
cursor:pointer;/*鼠标移到上面是手型效果*/
}
#tabsecond li.tabin{
background-color :#F2F6F8;
border:1px solid black;
border-bottom :0;/*去掉标签下边框*/
z-index:100;/*控制层高，让标签层盖住内容层*/
position:relative ;
}
#contentsecond{
width:300px;
height:100px;
padding:10px;
background-color :#F2F6F8;
clear:left ;
border:1px solid black;
position:relative;/*表示相对原来的位置进行移动*/
top:-1px;/*将内容框向上移动一个像素，覆盖住标签框的一部分*/
}
</span>
JS文件：
<span style="font-family:KaiTi_GB2312;font-size:18px;">var timeoutid;
$(document).ready(function () {
////找到所有的标签,鼠标的移入和移出事件
//$("li").mouseover(function () {
// //鼠标移入的时候将原来内容区域隐藏
// $("div.contentin").hide();
// //将当前标签所对应内容显示出来
//});
$("#tabfirst li").each(function (index) {
//每一个有li的Jquery对象都会执行function中的代码
//index是当前执行这个function代码的li的索引值
//有了index后，就可以找到当前标签对应的内容区域
//当鼠标移入的时候
$(this).mouseover(function () {
var liNode = $(this);//这里的this代表li，保存一下，后面用到
//当鼠标进入的时候做一个延时，防止用户恶意的进行鼠标快速滑动造成数据库崩溃
timeoutid=setTimeout(function () {
//将原来现实的内容区域进行隐藏
$("div.contentin").removeClass("contentin");
//对有tabin定义的Class的li要进行class的清除
$("#tabfirst li.tabin").removeClass("tabin");
//将当前标签对应的内容区域显示出来
$("div.contentfirst").eq(index).addClass("contentin");
//让当前的标签li多一个classtabin
liNode.addClass("tabin");
}, 300);
}).mouseout(function () {//鼠标的移出事件
clearTimeout(timeoutid);//记录一下移出时的id
});
});
//接下来要写动态加载页面内容，这个需要JSP文件，VS没有，所以就不展示了等学到了再回来看
})
</span>
需要注意的点：
1、eq方法可以根据索引值只得到jquery对象中包含的多个元素中的某一个，并返回元素对应的新JQuery对象。
2、js中的setTimeout方法可以延时执行某些代码，对应的clearTimeout可以清除设定的延时操作。
3、z-index可以控制元素在页面中的层高，值越大层越高，可以覆盖住一些z-index值较低的元素。，并且只有position的值为relative或absolute的元素，z-index才会生效。
图中第一组的标签是静态的，显示的内容直接加载。而第二类是从后台调出内容或者整个页面来显示的，需要用到AJAX，所以没有写完整，现在只是给一个框架。
第一组，HTML代码：
<span style="font-family:KaiTi_GB2312;font-size:18px;"><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>JQuery实例四--标签页效果（内容是静态的）</title>
<link href="selectTab.css" rel="stylesheet" />
<script src="jquery.js"></script>
<script src="selectTab.js"></script>
</head>
<body>
<ul id="tabfirst">
<li class=" tabin">标签1</li>
<li>标签2</li>
<li>标签3</li>
</ul>
<div class="contentin contentfirst">我是内容1</div>
<div class =" contentfirst">我是内容2</div>
<div class=" contentfirst">我是内容3</div>
</body>
</html>
</span>
第二组HTML代码：
<span style="font-family:KaiTi_GB2312;font-size:18px;">HTML：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>JQuery实例四--标签页效果（内容是动态加载的）</title>
<link href="selectTab.css" rel="stylesheet" />
<script src="jquery.js"></script>
<script src="selectTab.js"></script>
</head>
<body>
<ul id="tabsecond">
<li class=" tabin">装入完整页面</li>
<li>装入部分页面</li>
<li>从远程获取数据</li>
</ul>
<div id="contentsecond">test</div>
</body>
</html>
</span>
他们公用一个CSS：
<span style="font-family:KaiTi_GB2312;font-size:18px;">body {
}
/*下面的饿两个，表示把标签横排显示，并赋颜色*/
ul,li{
margin:0;
padding:0;
list-style:none;
}
#tabfirst li{
float:left ;
background-color :#868686;
color:white ;
padding:5px;/*设置字与字之间的距离，内边距*/
margin-right:2px;/*设置外边距*/
/*让所有的的标签框有一个边框，并让边框为白色,让标签和内容不紧挨着*/
border:1px solid white;
}
#tabfirst li.tabin{/*只在一个div上设置这个属性，然后再JS中动态给其他的添加*/
background-color :#6E6E6E;
border:1px solid #6E6E6E;/*让边框颜色和内容颜色一样，显示当前标签和当前内容是对应的*/
}
/*设置内容样式:竖直在标签下面*/
div.contentfirst{
clear:left ;
background-color :#6E6E6E;
color:white ;/*字体颜色*/
/*设置内容的宽高*/
width:300px;
height:100px;
padding:10px;
display:none;/*先隐藏内容框*/
}
div.contentin{/*只在一个div上设置这个属性，然后再JS中动态给其他的添加*/
display:block ;/*显示内容框*/
}
/*对selectTab1页面的样式编写*/
#tabsecond li{
float:left ;
background-color :white ;
color:blue ;
padding:5px;/*设置字与字之间的距离，内边距*/
margin-right:2px;/*设置外边距*/
cursor:pointer;/*鼠标移到上面是手型效果*/
}
#tabsecond li.tabin{
background-color :#F2F6F8;
border:1px solid black;
border-bottom :0;/*去掉标签下边框*/
z-index:100;/*控制层高，让标签层盖住内容层*/
position:relative ;
}
#contentsecond{
width:300px;
height:100px;
padding:10px;
background-color :#F2F6F8;
clear:left ;
border:1px solid black;
position:relative;/*表示相对原来的位置进行移动*/
top:-1px;/*将内容框向上移动一个像素，覆盖住标签框的一部分*/
}
</span>
JS文件：
<span style="font-family:KaiTi_GB2312;font-size:18px;">var timeoutid;
$(document).ready(function () {
////找到所有的标签,鼠标的移入和移出事件
//$("li").mouseover(function () {
// //鼠标移入的时候将原来内容区域隐藏
// $("div.contentin").hide();
// //将当前标签所对应内容显示出来
//});
$("#tabfirst li").each(function (index) {
//每一个有li的Jquery对象都会执行function中的代码
//index是当前执行这个function代码的li的索引值
//有了index后，就可以找到当前标签对应的内容区域
//当鼠标移入的时候
$(this).mouseover(function () {
var liNode = $(this);//这里的this代表li，保存一下，后面用到
//当鼠标进入的时候做一个延时，防止用户恶意的进行鼠标快速滑动造成数据库崩溃
timeoutid=setTimeout(function () {
//将原来现实的内容区域进行隐藏
$("div.contentin").removeClass("contentin");
//对有tabin定义的Class的li要进行class的清除
$("#tabfirst li.tabin").removeClass("tabin");
//将当前标签对应的内容区域显示出来
$("div.contentfirst").eq(index).addClass("contentin");
//让当前的标签li多一个classtabin
liNode.addClass("tabin");
}, 300);
}).mouseout(function () {//鼠标的移出事件
clearTimeout(timeoutid);//记录一下移出时的id
});
});
//接下来要写动态加载页面内容，这个需要JSP文件，VS没有，所以就不展示了等学到了再回来看
})
</span>
需要注意的点：
1、eq方法可以根据索引值只得到jquery对象中包含的多个元素中的某一个，并返回元素对应的新JQuery对象。
2、js中的setTimeout方法可以延时执行某些代码，对应的clearTimeout可以清除设定的延时操作。
3、z-index可以控制元素在页面中的层高，值越大层越高，可以覆盖住一些z-index值较低的元素。，并且只有position的值为relative或absolute的元素，z-index才会生效。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jquery 省市二级联动
- jQuery省市区三级联动
- jQuery同步提交示例代码
- jQuery Uploadify 上传插件出现Http Error 302 错误的解决办法
- jQuery Validate初步体验(一)
- jQuery Validate初步体验(二)
- JQuery优秀插件收集
- jquery
- JQuery相关知识点总结回顾
- 【jQuery05】通过按键 来切换 class
- 【jQuery04】折叠树
- 【jQuery03】简单的选项卡切换
- 【jQuery02】点击标题面板显示内容
- 【jQuery01】添加添加div
- template模板，Jquery插件[demo]
- 20151211jquery ajax进阶代码备份
- JQuery跨域请求实践
- 20151211Jquery Ajax进阶学习笔记
- jQuery Easing 动画效果扩展 ,全屏滚动案例
- jQuery 鼠标滚轮插件应用 mousewheel