习惯了js框架ext,jquery等。突然要用jsp+css实现标签页的效果,突然不适应了,在网上so了一下发现一个不错的实现方式,现引用一下:原版请参考:http://blog.csdn.net/uniorg/article/details/3176266,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>标签示例</title>
<style type="text/css">
body { font-size:14px; font-family:"宋体"}
ol li { margin:8px}
#con { font-size:12px; width:600px; margin:0 auto}
#tags { height:23px; width:400px; margin:0; padding:0; margin-left:10px}
#tags li { float:left; margin-right:1px; background:url(images/tagleft.gif) no-repeat left bottom; height:23px; list-style-type:none}
#tags li a { text-decoration:none; float:left; background:url(images/tagright.gif) no-repeat right bottom; height:23px; padding:0px 10px; line-height:23px; color:#999}
#tags li.emptyTag { width:4px; background:none}
#tags li.selectTag { background-position: left top; position:relative; height:25px; margin-bottom:-2px}
#tags li.selectTag a { background-position: right top; color:#000; height:25px; line-height:25px;}
#tagContent { padding:1px; background-color:#fff; border:1px solid #aecbd4;}
.tagContent { background:url(images/bg.gif) repeat-x; padding:10px; color:#474747; width:576px; display:none}
#tagContent div.selectTag{ display:block}
</style>
</head>
<body>
<h1>标签示例</h1>
<ol>
<li>使用JS实现tab标签效果</li>
<li>标签宽度随文字的数量自适应</li>
<li>支持 IE、Firefox、Chrome、Safari、opera</li>
</ol>
<div id="con">
<ul id="tags">
<li><a href="javascript:void(0)" onclick="selectTag('tagContent0',this)">标签一</a></li>
<li class="selectTag"><a href="javascript:void(0)" onclick="selectTag('tagContent1',this)">标签二</a></li>
<li><a href="javascript:void(0)" onclick="selectTag('tagContent2',this)">自适应宽度的标签</a></li>
</ul>
<div id="tagContent">
<div id="tagContent0" class="tagContent">第一个标签的内容<br />第一个标签的内容<br />第一个标签的内容</div>
<div id="tagContent1" class="tagContent selectTag">第二个标签的内容<p>标签背景图1:<img src="images/tagleft.gif" align="top"><br>标签背景图2:<img src="images/tagright.gif" align="top"><br>内容渐变背景图(1象素宽):<img src="images/bg.gif" align="top"></p></div>
<div id="tagContent2" class="tagContent">第三个标签的内容<p>放大观看标签背景图:<img src="images/tagleft.gif" align="top" width="300" height="100"></p></div>
</div>
</div>
<script type="text/javascript">
function selectTag(showContent,selfObj){
selfObj.blur();
// 操作标签
var tag = document.getElementById("tags").getElementsByTagName("li");
var taglength = tag.length;
for(i=0; i<taglength; i++){
tag[i].className = "";
}
selfObj.parentNode.className = "selectTag";
// 操作内容
for(i=0; j=document.getElementById("tagContent"+i); i++){
j.style.display = "none";
}
document.getElementById(showContent).style.display = "block";
}
</script>
</body>
</html>
效果如图:
- 大小: 20.9 KB
分享到:
相关推荐
JSP引入了被称为“JSP动作”的XML标签,用来调用内建功能。另外,可以创建JSP标签库,然后像使用标准HTML或XML标签一样使用它们。标签库能增强功能和服务器性能,而且不受跨平台问题的限制。JSP文件在运行时会被其...
前台制作采用标签制,分为系统标签和用户自义义标签两种,系统标签是自代的,用户不可以修改,而自定义标签则是用户根据相应的功能自己定制出来的,固此,可以自行删除或修改! 4、秉承JAVA开源理念,本新闻发布系统...
使用jsp+js脚本进行开发,同时使用html+css语言作为美化页面的方式,jsp页面使用c标签和el表达式来遍历和获取后台的数据,同时将部分脚本代码封装为js文件引用,提高代码的可读性 数据库设计: 数据库采用mysql...
该心之语许愿墙主要由JSP+Ajax+CSS 实现,主要包括:应用 DIV+CSS 样式进行页面布局、通过过滤器解决中文乱码、定义生成指定范围随机数标签的方法、随机显示许愿字条的方法、支持字条后人气自动增加的方法、利用 ...
此项目为本人2015年的毕业设计,含展示页+后台管理系统。用最基础的servlet+jsp+mysql写的,技术老了,但很完整。整个项目的页面设计、功能设计、开发皆由本人一人完成,特此一份。 文末附上开题报告+论文,供大家...
JSP:页面文件,动态页面。 JSP:JAVA Server Page,是服务器端一种基于JAVA语言的网页技术,所有程序操作都是在服务端执行,网络上传送的仅仅是运行的结果。...HTML+CSS+JAVASCRIPT+JAVA+JSP标签==JSP
此日历用jsp标签及java代码、css、html完成,简单易用,很好的个人练习使用实例。
jsp版本的 "css/js合并以及版本控制"的标签 option 用来基于 i18n配置文件,渲染select option选项,实现国际化功能,简化开发 barcode 用来在页面生成二维码 Maven使用配置 ...
《Java Web开发技术大全:JSP+Servlet+Struts+Hibernate+Spring+Ajax》重点讲解了Struts 2、Speing和HIbernate框架的基础知识和高级技术,如Sruts 2中的拦截器、类型转换、国际化和标签等,HIbe rna{e的会话、0/R映射...
在“参数选择”的文件选项页,禁用“'保存时自动创建备份文件”选项 【13】软件技巧——添加语法文件、自动完成文件、以及剪辑库文件 要添加 *.STX(语法文件)或 *.ACP(自动完成文件): 1. 选择“参数选择→语法...
EXT中要用到的js包css包和images包 在jsp页面中导入; charset=utf-8"> <link rel="stylesheet" href="css/ext-all.css" type="text/css" /> ...css标签要放在最前面
this.cssClass = cssClass; } public String getAction() { return action; } public void setAction(String action) { this.action = action; } public Integer getPageCount() { return ...
学习完jsp,感觉这种技术能普遍运用,现在制作了一个简单的登录界面知识点:自定义动画、选择器高级应用、响应式网站开发、行业命名规范、域名注册-搭建个人网站 让学员熟练掌握css、js、JQuery等技术,可做到独立...
<span class="emoji emoji1f631"></span>,类似于这种的标签,引入css可以识别。
最近经常要用tab标签页,所以写了一个简单的,以后用的话直接拷贝一个,稍微改改就OK了。 先看效果图: 接下来看下代码怎么写的吧: 一、sp文件easytab.jsp 代码如下: <%@ page language=”java” import=”...
link rel=”stylesheet” type=”text/css” href=”path/myCss.css”/></head> 2、内部样式 当单个文档需要特殊的样式时,就应该使用内部样式表。可以使用<style>标签在文档头部定义内部样式表...
5.2.1 Tomcat如何处理JSP页 5.2.2 分析由JSP生成的Servlet代码 5.3 JSP基本语法 5.3.1 JSP表达式 5.3.2 在JSP中嵌入Java代码 5.3.3.JSP声明 5.3.4.JSP表达式语言(EL) 5.3.5 实例:用EL函数替换HTML...
5.2.1 Tomcat如何处理JSP页 5.2.2 分析由JSP生成的Servlet代码 5.3 JSP基本语法 5.3.1 JSP表达式 5.3.2 在JSP中嵌入Java代码 5.3.3.JSP声明 5.3.4.JSP表达式语言(EL) 5.3.5 实例:用EL函数...
它提供了一套非常省力的API,可通过DOM,CSS以及类似于JQuery的操作...3、不能在元素之前添加JSP标签,例如: <jsp:page contentType="text/html; charset=UTF-8" /> 该版本在jsoup-1.6.1之上修改,支持以上等内容。