jsp选项卡导航实现——模板
效果
刚进来页面的样子
在第二个选项卡上方时
点击后
离开
同样第三个
点击
移走鼠标
代码
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<head>
<title>选项卡式导航</title>
<style type="text/css">
<!--
* {
margin: 0; padding:0
}
body {
margin-top: 10px;
margin-right: 10%;
margin-bottom: 10px;
margin-left: 10%;
text-align: center;
height: auto;
width: auto;
background-color: #666666;
font-size: 12px;
color: #000000;
}
#container {
text-align: left;
width: 760px;
height: 400px;
padding: 20px;
}
#container #title {
height: 28px;
}
#container #title li {
float: left;
list-style-type: none;
height: 28px;
line-height: 28px;
text-align: center;
margin-right: 1px;
}
#container #title ul {
height: 28px;
}
#container #title a {
text-decoration: none;
color: #000000;
display: block;
width: auto;
}
#container #title a span{
display: block;
padding: 0 15px 0 15px;
}
#container #title #tag1 a:hover {
text-decoration: none;
display: block;
width: auto;
}
#container #title #tag1 a:hover span{
display: block;
background-color: dodgerblue;
padding: 0 15px 0 15px;
}
#container #title #tag2 a:hover {
text-decoration: none;
display: block;
width: auto;
}
#container #title #tag2 a:hover span{
background-color: dodgerblue;
display: block;
padding: 0 15px 0 15px;
}
#container #title #tag3 a:hover {
text-decoration: none;
display: block;
width: auto;
}
#container #title #tag3 a:hover span{
background-color: dodgerblue;
display: block;
padding: 0 15px 0 15px;
}
#container #title #tag4 a:hover {
text-decoration: none;
display: block;
width: auto;
}
#container #title #tag4 a:hover span{
background-color: dodgerblue;
display: block;
padding: 0 15px 0 15px;
}
#container #title #tag5 a:hover {
text-decoration: none;
display: block;
width: auto;
}
#container #title #tag5 a:hover span{
background-color: dodgerblue;
display: block;
padding: 0 15px 0 15px;
}
#container #title .selectli1 {
text-decoration: none;
color: #ffffff;
display: block;
width: auto;
}
#container #title a .selectspan1 {
display: block;
padding: 0 15px 0 15px;
}
#container #title .selectli2 {
text-decoration: none;
color: #ffffff;
display: block;
width: auto;
}
#container #title a .selectspan2 {
display: block;
padding: 0 15px 0 15px;
}
#container #title .selectli3 {
text-decoration: none;
color: #ffffff;
display: block;
width: auto;
}
#container #title a .selectspan3 {
display: block;
padding: 0 15px 0 15px;
}
#container #title .selectli4 {
text-decoration: none;
color: #ffffff;
display: block;
width: auto;
}
#container #title a .selectspan4 {
display: block;
padding: 0 15px 0 15px;
}
#container #title .selectli5 {
text-decoration: none;
color: #ffffff;
display: block;
width: auto;
}
#container #title a .selectspan5 {
display: block;
padding: 0 15px 0 15px;
}
#container #content ul {margin: 10px;}
#container #content li {margin: 5px; }
#container #content li img {margin: 5px;display:block;}
#container #content {
height: 300px;
padding: 10px;
}
.content1 {
border-top-width: 3px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #3A81C8;
border-right-color: #3A81C8;
border-bottom-color: #3A81C8;
border-left-color: #3A81C8;
background-color: #DFEBF7;
}
.content2 {
border-top-width: 3px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #ff950b;
border-right-color: #ff950b;
border-bottom-color: #ff950b;
border-left-color: #ff950b;
background-color: #FFECD2;
}
.content3 {
height: 300px;
padding: 10px;
border-top-width: 3px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #FE74B8;
border-right-color: #FE74B8;
border-bottom-color: #FE74B8;
border-left-color: #FE74B8;
background-color: #FFECF5;
}
.content4 {
height: 300px;
padding: 10px;
border-top-width: 3px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #00988B;
border-right-color: #00988B;
border-bottom-color: #00988B;
border-left-color: #00988B;
background-color: #E8FFFD;
}
.content5 {
height: 300px;
padding: 10px;
border-top-width: 3px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #A8BC1F;
border-right-color: #A8BC1F;
border-bottom-color: #A8BC1F;
border-left-color: #A8BC1F;
background-color: #F7FAE2;
}
.hidecontent {display:none;}
-->
</style>
<script language="javascript">
function switchTag(tag,content)
{
// alert(tag);
// alert(content);
for(i=1; i < 6; i++)
{
if ("tag"+i==tag)
{
document.getElementById(tag).getElementsByTagName("a")[0].className="selectli"+i;
document.getElementById(tag).getElementsByTagName("a")[0].getElementsByTagName("span")
[0].className="selectspan"+i;
}else{
document.getElementById("tag"+i).getElementsByTagName("a")[0].className="";
document.getElementById("tag"+i).getElementsByTagName("a")[0].getElementsByTagName("span")
[0].className="";
}
if ("content"+i==content)
{
document.getElementById(content).className="";
}else{
document.getElementById("content"+i).className="hidecontent";
}
document.getElementById("content").className=content;
}
}
</script>
</head>
<body>
<div id="container">
<div id="title">
<ul>
<li id="tag1"><a href="#" onclick="switchTag('tag1','content1');this.blur();" class="selectli1"><span
class="selectspan1">首页</span></a></li>
<li id="tag2"><a href="#" onclick="switchTag('tag2','content2');this.blur();"><span>下载中心</span></a></li>
<li id="tag3"><a href="#" onclick="switchTag('tag3','content3');this.blur();"><span>产品介绍</span></a></li>
<li id="tag4"><a href="#" onclick="switchTag('tag4','content4');this.blur();"><span>会员注册与登录</span></a></li>
<li id="tag5"><a href="#" onclick="switchTag('tag5','content5');this.blur();"><span>联系我们</span></a></li>
</ul>
</div>
<div id="content" class="content1">
<div id="content1" >1、根据字数自适应项目长度</div>
<div id="content2" class="hidecontent">2、不同的项目使用不同的颜色来区分</div>
<div id="content3" class="hidecontent">3、这回需要使用到js了，呵呵</div>
<div id="content4" class="hidecontent">4、背景图片只需要两个图片文件就足够，减少服务器负担</div>
<div id="content5" class="hidecontent">5、这是使用到的两个图片</div>
</div>
</div>
</body>
</html>
jsp选项卡导航实现——模板的更多相关文章
- EasyMvc入门教程-基本控件说明（13）选项卡导航
选项卡Tab导航主要用于企业页面显示不同子类或者子页面的信息内容. 先来一个基本的使用例子:代码如下: @{ var data = new List<TabItem>() { new Ta ...
- 30个实用的jQuery选项卡/导航教程推荐
很多网站设计中都使用了选项卡(tabs),在制作选项卡时应用jQuery能够实现很多炫酷的过渡和动画效果.本文为你介绍30个实用的jQuery选项卡教程,希望对你有帮助. 1. Animated Ta ...
- springmvc 配置多视图，返回jsp,velocity,freeMarker,tiles(模板)等等
springmvc-servlet.xml配置 <!-- Velocity --> <bean id="velocityViewResolver" class = ...
- bootstrap 响应式导航条模板（含下拉菜单，弹出框）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jsp+struts2登录框架模板
一.建立一个名叫jsp_struts2的项目 二.导入jar包 如上图:jar包导入在WebContent/WEB-INF/lib下 三.建立一个LoginAction类 LoginAction类的s ...
- jsp+servlet登录框架模板
一.建立一个名叫jsp_servlet的工程 二.建立一个AcountBean类和CheckAccount类 1.AcountBean类包含登录名(username)和登录密码(password) p ...
- jsp动态导航栏
站点页面的导航栏是从数据库中生成出来的,所以在界面上展示导航栏时,要从数据库中读取出来,但不能每次显示一个页面都从数据库中读.这样就非常浪费性能.应该考虑把导航栏放到一个缓存中.如:session.a ...
- 在Eclipse中修改Jsp页面的新增模板
打开Eclipse的Preferences页面 路径: Window à Preferences 搜索"jsp",点击"Templates",选择要修改的Jsp ...
- myeclipse10 中修改html,servlet,jsp等的生成模板
1.进入myeclipse的安装目录 2.用减压软件,(如winrar)打开common\plugins\com.genuitec.eclipse.wizards_9.0.0.me2011080913 ...
随机推荐
- Cookies Client Identification
HTTP The Definitive Guide Cookies are the best current way to identify users and allow persistent se ...
- LINux网络的NAPI机制详解一
在查看NAPI机制的时候发现一篇介绍NAPI引入初衷的文章写的很好,通俗易懂,就想要分享下,重要的是博主还做了可以在他基础上任意修改,而并不用注明出处的声明,着实令我敬佩,不过还是附上原文链接! ht ...
- git学习------>如何修改git已提交的记录中的Author和Email？
一.背景 最近搭建好GitLab后,准备陆陆续续的将之前在SVN仓库中保存的代码迁移到GitLab上,昨天顺利将三个Android组件的代码迁移到GitLab后,其他同事发现迁移是成功了,但是pull ...
- 【我的Android进阶之旅】Android目录过长造成错误：Failed to crunch file abc_textfield_search_activated_mtrl_alpha.9.png
一.编译异常描述 一大早来开发一个新的需求,拉取了一个新的分支,然后导入Android Studio之后,编译就报错了,报错如下所示: 错误具体日志如下所示: Information:Gradle t ...
- Jersey 出现415 MediaType is not supported问题的原因
前段时间在使用jersey的时候,经常碰到这个问题,一直没有找到真正的原因.找了其他的解决访问,比如使用jackson以及手动转为json再返回给前端. 后续发现问题出在domain对象属性类型和se ...
- 嵌入式文件系统构建工具 busybox / buildroot / openwrt
1.busybox busybox最轻量 1) 修改Makefile CROSS_COMPILE ?= /usr/local/gcc-linaro-arm-linux-gnueabihf/bin/ar ...
- jenkins用户管理(Role-based Authorization Strategy插件使用)
安装:Role-based Authorization Strategy插件 一.点击左侧的"系统管理"-->再点击绿色的"管理插件" 二.点击&quo ...
- maven+springmvc+spring+mybatis
一.项目搭建 1)创建maven项目 选择apache的maven-archetype-webapp 填入groupID : 例如 com.mracale artifactId :例如 shoppin ...
- 批处理delims分割时遇到的问题。。
今天写了个将文件每行按逗号分割并取第六行的批处理.但是结果不对.看图一目了然. for 循环的/f 后面的参数是这样的 然后文件的内容是这样的 亮点是倒数第二行..其实6才是第六列的值.其他行第六列都 ...
- 如何设计Spring读取某种文件的逻辑顺序
1. 判断系统属性System.getProperty("apdb.config.path", "");,有的话,优先使用.(系统属性可以在命令行中以 -D&l ...