JSP Ajax 切换标签
标签页的应用能使整个页面更加简洁，更加美观，是一个很实用的功能，本实例就应用Ajax技术实现了标签页。
当单击某个标签时，程序就会显示该标签页的内容，其他标签页的内容会被隐藏。
建立静态页面，这个页面提供了一个带有标签页的界面，打开记事本，新建一
下面代码控制标签切换时，不同状态标签的显示样式。
首先恢复所有标签的显
创建JSP文件来处理客户端请求并返回处理信息，打开记事本，新建一个名字
html页面，单击“数码销量排行”，如图9-13所示。
图9-13 切换标签页。
JSF标签使用参考手册文档信息修订记录文档审核/审批（此文档需如下审核）文档分发（此文档将分发至如下各人）目录1前言51.1文档目的 (5)1.2文档范围 (5)1.3目标读者 (5)2基础标签 (6)2.1<f:view> (6)2.2<f:subview> (6)2.3<f:loadBundle> (6)2.4<h:message> (7)2.5<h:messages> (8)2.6<h:graphicImage> (9)2.7<h:outputText> (9)2.8<h:dataTable> (10)2.9<x:dataScroller> (12)2.10<h:inputText> (14)2.11<h:inputTextarea > (15)2.12<h:inputSecret > (16)2.13<x:inputCalendar > (17)2.14<h:inputHidden > (18)2.15<h:selectOneMenu> (19)2.16<h:selectOneRadio> (20)2.17<h:selectOneListbox> (21)2.18<h:selectManyListbox> (23)2.19<h:selectBooleanCheckbox> (24)2.20<f:selectItems> (24)2.21<h:outputLink> (25)2.22<h:commandButton> (26)2.23<h:commandLink> (26)2.24<x:updateActionListener> (27)2.25<x:jscookMenu> (28)3自定义标签 (30)3.1<gc:ajaxlink> (30)3.2<gc:ajaxdialog> (31)3.3<gc:inputdate> (32)3.4<gc:multLink> (33)3.5<gc:multCheck> (34)3.6<gc:multSelect> (35)3.7<gc:paginator> (36)3.8<gc:panelGrid> (37)3.9<gc: codetable> (39)3.10<gc: oneSelect> (39)3.11<gc: outputText> (40)3.12<gc: commandLink> (41)3.13<gc: commandButton> (42)3.14<gc: scrollPanelGrid> (43)3.15<gc: convertNumberFormat> (43)3.16<gc: inputCode> (44)4客户端验证标签 (46)4.1<gv: compareValidator > (46)4.2<gv: requiredfieldValidator > (47)4.3<gv: lengthValidator > (47)4.4<gv: rangeValidator > (48)4.5<gv: regularexpressionValidator > (48)4.6<gv: mustcheckedValidator > (49)4.7<gv: dateformatValidator > (49)4.8<gv: datamaskValidator > (50)4.9<gv: customValidator > (51)4.10<gv: scriptGenerator > (51)5表格分页 (52)5.1数据 (52)5.2页面 (53)6限制文本框输入 (55)7BackingBean中方法说明561 前言1.1 文档目的该文档旨在为界面开发工作组提供一套完整的JSF控件使用说明书。
JSP Ajax 实现Web页面的局部动态更新
在浏览网页时，往往因为查看局部信息，而导致整个网页都需要从服务器端重新加载一次。
传统的Web实现方式中，实现类似的效果必须进行整个页面的刷新。
但是借助Ajax技术，可以实现对页面中局部区域的动态刷新，使得用户能够以更好的方式获得最新的数据信息。
本实例演示使用Ajax技术局部动态更新数据。
练习要点：
创建MySQL数据库，名称为test。
数据库中创建表person，表字段信息如表9 -2所示：
创建数据库连接类，打开记事本创建DB.java，代码如下：
现在建立客户端程序。
打开记事本，新建一个名为index5.jsp的页面，代码如
创建一个JSP页面来处理客户端发送的请求，该文件实现删除功能。
打开记事本，新建一个名为index5_server.jsp的文件，代码如下所示：
下面代码判断客户端请求参数，如果不为空，则执行删除操作。
然后从数据库中取出数据，以XML格式返回给客户端。
把本实例部署到Tomcat服务器上后，打开index5.jsp页面，如图9-7所示。
图9-7 局部刷新
单击【删除】，可以看到整个页面并未刷新，只是局部更新。
页面显示如图9-8
所示：
图9-8 删除操作。
实现选项卡切换的三种⽅式⾸先我⽤Jquery库实现了⼀个简单的效果，只需要点击上⾯的导航标签即可切换下⽅内容，Html代码如下<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>tab切换</title><style type="text/css">*{padding:0;margin:0;font:normal 15px "微软雅⿊";color:#000;}ul{list-style-type: none;padding-left: 5px;margin-bottom: -2px}.tab{width:500px;margin: 10px auto}a{text-decoration: none;}.title li{display: inline-block;border: 1px solid #999;border-bottom: 2px solid #a00;background: #fff;text-align: center;width: 60px;height: 30px;margin: 0 1px;line-height: 30px} .title .active{border-top:2px solid #a00;border-bottom: 2px solid #fff; }#content{margin: 0;border: 1px solid #ccc;border-top: 2px solid #a00;width: 300px}#content div{display: none;padding: 10px 0}#content .mod{display: block;}</style></head><body><div class="tab"><ul class="title"><li class="active"><a href="#">房产</a></li><li><a href="#">家居</a></li><li><a href="#">⼆⼿房</a></li><!--<li><a href="#">家居</a></li>--></ul><div id="content"><div class="mod"><ul><li><a href="#">房产内容1</a></li><li><a href="#">房产内容2</a></li><li><a href="#">房产内容3</a></li></ul></div><div class="mod" style="display: none"><ul><li><a href="#">家居内容1</a></li><li><a href="#">家居内容2</a></li><li><a href="#">家居内容3</a></li></ul></div><div class="mod" style="display: none"><ul><li><a href="#">⼆⼿房内容1</a></li><li><a href="#">⼆⼿房内容2</a></li><li><a href="#">⼆⼿房内容3</a></li></ul></div></div></div></body></html>View CodeJquery代码如下：<script type="text/javascript" src="jquery-3.0.0.min.js"></script><script type="text/javascript">$(function(){$(".title li").click(function(){// var $this=$(this);// alert($this.index());$(this).addClass("active").siblings().removeClass("active");$("#content .mod").eq($(".title li").index(this)).show().siblings("#content .mod").hide();});});</script>View Code相信⼤家⽤Jquery都是⽐较轻松，紧接着我⼜尝试了⽤源⽣的js代码来实现这种效果，效果图如下：实现所需的html代码：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style type="text/css">*{padding: 0;margin: 0;box-sizing: border-box}div{width: 70%;margin: 20px auto;}ul{list-style: none;overflow: hidden;}#nav{width: 400px;height: 40px;text-align: center;line-height: 40px;background: #c5c5c5;}#nav li{width: 25%;height: 40px;float: left;border: 1px solid #c5c5c5;border-bottom: none;}#nav li.active{background: #fff;}#content{width: 400px;height: 300px;position: relative;border: 1px solid #c5c5c5;border-top: none;}#content li{width: 100%;height: 100%;position: absolute;padding: 10px;display: none}</style></head><body><div><ul id="nav"><li class="active">选项⼀</li><li>选项⼆</li><li>选项三</li><li>选项四</li></ul><ul id="content"><li style="display: block">内容⼀</li><li>内容⼆</li><li>内容三</li><li>内容四</li></ul></div></body></html>View Codejs代码如下：<script type="text/javascript">var nav =document.getElementById("nav");var navlist = nav.children;var con = document.getElementById("content");var conlist = con.children;for (var i= 0;i<navlist.length;i++){navlist[i].index = i;navlist[i].onclick = function (){for (var m = 0;m< conlist.length;m++){navlist[m].className = "";conlist[m].style.display ="none";}this.className = "active";conlist[this.index].style.display = "block";}}</script>如果说⼤家在写页⾯的时候需要多次实现选项卡效果，但是⼜不想造成代码重复该怎么办呢？我们这时候可以使⽤函数封装概念来封装⼀个函数⽅法来实现多次调⽤。
电子技术与软件工程Electronic Technology&Software Engineering软件开发与应用Software Development And Application使用原生JavaScript实现Tab标签切换的方法李燕华(北京市海淀区职工大学北京市100083)摘要：本文分析了常见的js交互代码错误，分别使用函数闭包和ES6提供的新关键字let实现Tab标签切换，并对两种方法进行了比较。
关键词：Tab标签切换；JavaScript;函数闭包；letTab标签切换在网页中常用在导航菜单、新闻分类、产品列表等栏目制作，应用十分广泛。
其实现的功能是：点击不同的标签名称，显示不同的栏目或内容列表。
1Tab标签切换的原理Tab标签名称和内容——对应，所有标签名称样式相同，平铺显示。
各内容项大小、位置相同，任意时刻只有一项内容显示在内容框中。
页面加载时第一个标签名称高亮显示，第一项内容显示在内容框中。
点击某一个标签名称，标签名称高亮显示，其对应内容项显示在内容框中⑴。
如图1、图2所示。
2HTML结构及CSS样式设置2.1HTML结构在html结构中，分别设置一个存放Tab标签名称的列表和一个存放具体内容的列表cont,内容列表cont包含元素的个数和Tab 标签列表包含元素的个数相同、按照编号一一对应。
本文案例采用4个Tab标签进行切换，其html结构部分代码如下：<div class='*Tab"><!-Tab标签列表・・><div id=n list M><ul><li style="border:none;background-color:#66CC66">标签<li>标签4</li></ul></div><!-内容列表-><div class="cont"style="display:block">第1页<br>内容列表</div><div class="cont">第4页<br>内容列表</div></div>2.2CSS样式设置Tab标签名称样式相同，并列平铺，默认第一项标签名称高亮显示；cont列表中的元素大小和位置相同，只显示第一项内容元素，其他内容元素隐藏。
