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 ...
随机推荐
- OKEx量化分析报告[2017-12-19]
[分析时间]2017-12-19 09:05 [分析对象]OKEx [有效期限]2017-12-19 09:00:00 — 2017-12-19 09:59:59 [报告内容]DASH_USDT ...
- 剑指Offer——扑克牌顺子
题目描述: LL今天心情特别好,因为他去买了一副扑克牌,发现里面居然有2个大王,2个小王(一副牌原本是54张^_^)...他随机从中抽出了5张牌,想测测自己的手气,看看能不能抽到顺子,如果抽到的话,他 ...
- okhttp发送post请求
String url = "http://www.xxx.com/api/test"; OkHttpClient httpClient = new OkHttpClient(); ...
- Loki之Funtion
阅读Loki中Funtion源码之后的个人理解,该库归纳起来可以说有三层(C++设计新思维列举到2个参数,此处列举到3个参数),要记住C++的模板其实就是C语言高级的宏定义,如果用户没有用到对应的模板 ...
- RocketMQ 单机安装
本章快速入门指南是在本地机器上设置 RocketMQ 消息传递系统以发送和接收消息的详细说明. 在这先对RocketMQ 做一个简单介绍. RocketMQ是一个纯java.分布式.队列模型的开源消息 ...
- 我眼中的DevOps(转)
过去一年以来,一批来自欧美的.不墨守陈规的系统管理员和开发人员一直在谈论一个新概念:DevOps.DevOps 就是开发(Development)和运维(Operations)这两个领域的合并.(如 ...
- POJ1459:Power Network（dinic)
题目链接:http://poj.org/problem?id=1459 题意:有n个结点,np个发电站,nc个消费者,m个电力运输线.接下去是m条边的信息(u,v)cost,cost表示边(u,v)的 ...
- 深入跟踪MFC程序的执行流程
来源: http://blog.csdn.net/ljianhui/article/details/8781991 在MFC程序设计的学习过程中最令人感到难受,甚至于有时会动摇学习者信心的就是一种对于 ...
- Python编程题总结
1 数学篇 1.1 斐波那契数列 def fib(n): if n in (0, 1): return n fib_n1, fib_n2 = 0, 1 for i in range(2, n + 1) ...
- 88. Merge Sorted Array（从后向前复制）
Given two sorted integer arrays nums1 and nums2, merge nums2 into nums1 as one sorted array. Note:Yo ...