css_jsp制作页面选项卡
2013-10-10 14:33
344 查看
当鼠标移动到哪一个选项卡标题上时候，会自动调用JSP代码，JSP代码的功能和作用是将类名.up和.blank从原来的地方（选项卡标题和选项卡内容）换到现在的地方 ，同时将原来的选项卡标题和选项卡内容中的类名修改为" "
最后的效果如图所示：
<!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=utf-8" />
<title>无标题文档</title>
<style>
*{
padding:0;
margin:0;
}
#tab
{
width:400px;
position:relative;
margin:0 auto;
margin-top:100px;
}
#tab div
{
display:none;/*让选项卡内容在没有激活的时候不显示*/
position:absolute;
top:24px;/*选项卡标题的高度是24px*/
left:0;
width:398px;
border:solid #d4d3d3;
border-width:0 1px 1px;
}
#tab .blank
{
display:block;
padding-bottom:10px;/*让激活的选项卡内容区域最低端的文字不贴着元素底部*/
}
#tab h3
{
width:98px;
float:left;
height:24px;
border:1px solid #cccccc;
text-align:center;
font-size:14px;
font-weight:normal;
line-height:24px;
background:url(images/51.jpg) no-repeat;
cursor:pointer;/*让鼠标移动到选项卡标题上的时候变成手的形状*/
}
#tab .up
{
background:url(images/61.jpg) no-repeat;
}
#tab ul
{
margin:15px 0 0;/*让列表项文字离选项卡标题的下端远一点*/
padding:0;
}
#tab ul,#tab li
{
list-style:none;
}
#tab li
{
width:47.9%;/*这里用百分比的作用可以解决IE6中的宽度解析问题*/
height:22px;
line-height:22px;/*这两行的作用是设置li的高度，并将li中的文字内容上下居中显示*/
float:left;
margin:0 1%;
border-bottom:1px dashed #cccccc;
text-indent:10px;
display:inline;/*修改IE6中的双倍间距的bug问题*/
white-space:nowrap;
text-overflow:ellipsis;
overflow: hidden;/*这三行的作用是，如果li中的文字内容超过li的大小，则超出的部分用省略号显示*/ }
#tab li a
{
font-size:12px;
text-decoration:none;
color:#333333;
text-indent:10px;
}
#tab li a:hover
{
text-decoration:underline;
color:red;
}
#tab a:hover h3
{
border:1px solid #cccccc;
border-bottom:0px;
}
</style>
</head><body>
<div id="tab">
<!--选项卡标题开始-->
<h3 class="up" onmouseover="go_to(1);">选项一</h3>
<!--选项卡标题结束-->
<!--选项卡内容开始-->
<div class="blank">
<ul>
<li><a href="#" title="超银行利率4倍不受保护">超银行利率4倍不受保护</a></li>
<li><a href="#" title="超银行利率4倍不受保护">超银行利率4倍不受保护</a></li>
<li><a href="#" title="超银行利率4倍不受保护">超银行利率4倍不受保护</a></li>
<li><a href="#" title="超银行利率4倍不受保护">超银行利率4倍不受保护</a></li>
<li><a href="#" title="超银行利率4倍不受保护">超银行利率4倍不受保护</a></li>
<li><a href="#" title="超银行利率4倍不受保护">超银行利率4倍不受保护</a></li>
<li><a href="#" title="超银行利率4倍不受保护">超银行利率4倍不受保护</a></li>
<li><a href="#" title="超银行利率4倍不受保护">超银行利率4倍不受保护</a></li>
<li><a href="#" title="超银行利率4倍不受保护">超银行利率4倍不受保护</a></li>
<li><a href="#" title="超银行利率4倍不受保护">超银行利率4倍不受保护</a></li>
<li><a href="#" title="超银行利率4倍不受保护">超银行利率4倍不受保护</a></li>
<li><a href="#" title="超银行利率4倍不受保护">超银行利率4倍不受保护</a></li>
</ul>
</div>
<!--选项卡内容结束-->
<!--选项卡标题开始-->
<h3 onmouseover="go_to(2);">选项二</h3>
<!--选项卡标题结束-->
<!--选项卡内容开始-->
<div>
<ul>
<li><a href="#" title="欧洲央行前副行长出任希腊总理今日就职">欧洲央行前副行长出任希腊总理今日就职</a></li>
<li><a href="#" title="欧洲央行前副行长出任希腊总理今日就职">欧洲央行前副行长出任希腊总理今日就职</a></li>
<li><a href="#" title="欧洲央行前副行长出任希腊总理今日就职">欧洲央行前副行长出任希腊总理今日就职</a></li>
<li><a href="#" title="欧洲央行前副行长出任希腊总理今日就职">欧洲央行前副行长出任希腊总理今日就职</a></li>
<li><a href="#" title="欧洲央行前副行长出任希腊总理今日就职">欧洲央行前副行长出任希腊总理今日就职</a></li>
<li><a href="#" title="欧洲央行前副行长出任希腊总理今日就职">欧洲央行前副行长出任希腊总理今日就职</a></li>
<li><a href="#" title="欧洲央行前副行长出任希腊总理今日就职">欧洲央行前副行长出任希腊总理今日就职</a></li>
<li><a href="#" title="欧洲央行前副行长出任希腊总理今日就职">欧洲央行前副行长出任希腊总理今日就职</a></li>
<li><a href="#" title="欧洲央行前副行长出任希腊总理今日就职">欧洲央行前副行长出任希腊总理今日就职</a></li>
<li><a href="#" title="欧洲央行前副行长出任希腊总理今日就职">欧洲央行前副行长出任希腊总理今日就职</a></li>
<li><a href="#" title="欧洲央行前副行长出任希腊总理今日就职">欧洲央行前副行长出任希腊总理今日就职</a></li>
<li><a href="#" title="欧洲央行前副行长出任希腊总理今日就职">欧洲央行前副行长出任希腊总理今日就职</a></li>
<li><a href="#" title="欧洲央行前副行长出任希腊总理今日就职">欧洲央行前副行长出任希腊总理今日就职</a></li>
<li><a href="#" title="欧洲央行前副行长出任希腊总理今日就职">欧洲央行前副行长出任希腊总理今日就职</a></li>
</ul>
</div>
<!--选项卡内容结束-->
<!--选项卡标题开始-->
<h3 onmouseover="go_to(3);">选项三</h3>
<!--选项卡标题结束-->
<!--选项卡内容开始-->
<div>
<ul>
<li><a href="#" title="新观察：底层社会我们了解多少">新观察：底层社会我们了解多少</a></li>
<li><a href="#" title="新观察：底层社会我们了解多少">新观察：底层社会我们了解多少</a></li>
<li><a href="#" title="新观察：底层社会我们了解多少">新观察：底层社会我们了解多少</a></li>
<li><a href="#" title="新观察：底层社会我们了解多少">新观察：底层社会我们了解多少</a></li>
<li><a href="#" title="新观察：底层社会我们了解多少">新观察：底层社会我们了解多少</a></li>
<li><a href="#" title="新观察：底层社会我们了解多少">新观察：底层社会我们了解多少</a></li>
<li><a href="#" title="新观察：底层社会我们了解多少">新观察：底层社会我们了解多少</a></li>
<li><a href="#" title="新观察：底层社会我们了解多少">新观察：底层社会我们了解多少</a></li>
<li><a href="#" title="新观察：底层社会我们了解多少">新观察：底层社会我们了解多少</a></li>
<li><a href="#" title="新观察：底层社会我们了解多少">新观察：底层社会我们了解多少</a></li>
<li><a href="#" title="新观察：底层社会我们了解多少">新观察：底层社会我们了解多少</a></li>
</ul>
</div>
<!--选项卡内容结束-->
<!--选项卡标题开始-->
<h3 onmouseover="go_to(4);">选项四</h3>
<!--选项卡标题结束-->
<!--选项卡内容开始-->
<div>
<ul>
<li><a href="#" title="俄罗斯将于明夏加入世界贸易">俄罗斯将于明夏加入世界贸易组织</a></li>
<li><a href="#" title="俄罗斯将于明夏加入世界贸易">俄罗斯将于明夏加入世界贸易组织</a></li>
<li><a href="#" title="俄罗斯将于明夏加入世界贸易">俄罗斯将于明夏加入世界贸易组织</a></li>
<li><a href="#" title="俄罗斯将于明夏加入世界贸易">俄罗斯将于明夏加入世界贸易组织</a></li>
<li><a href="#" title="俄罗斯将于明夏加入世界贸易">俄罗斯将于明夏加入世界贸易组织</a></li>
<li><a href="#" title="俄罗斯将于明夏加入世界贸易">俄罗斯将于明夏加入世界贸易组织</a></li>
<li><a href="#" title="俄罗斯将于明夏加入世界贸易">俄罗斯将于明夏加入世界贸易组织</a></li>
<li><a href="#" title="俄罗斯将于明夏加入世界贸易">俄罗斯将于明夏加入世界贸易组织</a></li>
<li><a href="#" title="俄罗斯将于明夏加入世界贸易">俄罗斯将于明夏加入世界贸易组织</a></li>
</ul>
</div>
<!--选项卡内容结束-->
</div>
<script type="text/javascript">
<!--
var h=document.getElementById("tab").getElementsByTagName("h3");
var d=document.getElementById("tab").getElementsByTagName("div");
function go_to(ao)
{
for(var i=0;i<h.length;i++)
{
if(ao-1==i)
{
h[i].className="up";
d[i].className="blank";
}
else
{
h[i].className=" ";
d[i].className=" ";
}
}
}
//-->
</script>
</body>
</html>
思考：这种效果是鼠标移动到选项卡标题上的时候，选项卡内容就会自动变化，那么怎么设置当鼠标点击选项卡标题的时候选项卡内容才变换呢？很简单，只需要将每个h3中的onmouseover="go_to(X);"修改为onclick="go_to(X)"就可以了，X代表1到4
最后的效果如图所示：
<!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=utf-8" />
<title>无标题文档</title>
<style>
*{
padding:0;
margin:0;
}
#tab
{
width:400px;
position:relative;
margin:0 auto;
margin-top:100px;
}
#tab div
{
display:none;/*让选项卡内容在没有激活的时候不显示*/
position:absolute;
top:24px;/*选项卡标题的高度是24px*/
left:0;
width:398px;
border:solid #d4d3d3;
border-width:0 1px 1px;
}
#tab .blank
{
display:block;
padding-bottom:10px;/*让激活的选项卡内容区域最低端的文字不贴着元素底部*/
}
#tab h3
{
width:98px;
float:left;
height:24px;
border:1px solid #cccccc;
text-align:center;
font-size:14px;
font-weight:normal;
line-height:24px;
background:url(images/51.jpg) no-repeat;
cursor:pointer;/*让鼠标移动到选项卡标题上的时候变成手的形状*/
}
#tab .up
{
background:url(images/61.jpg) no-repeat;
}
#tab ul
{
margin:15px 0 0;/*让列表项文字离选项卡标题的下端远一点*/
padding:0;
}
#tab ul,#tab li
{
list-style:none;
}
#tab li
{
width:47.9%;/*这里用百分比的作用可以解决IE6中的宽度解析问题*/
height:22px;
line-height:22px;/*这两行的作用是设置li的高度，并将li中的文字内容上下居中显示*/
float:left;
margin:0 1%;
border-bottom:1px dashed #cccccc;
text-indent:10px;
display:inline;/*修改IE6中的双倍间距的bug问题*/
white-space:nowrap;
text-overflow:ellipsis;
overflow: hidden;/*这三行的作用是，如果li中的文字内容超过li的大小，则超出的部分用省略号显示*/ }
#tab li a
{
font-size:12px;
text-decoration:none;
color:#333333;
text-indent:10px;
}
#tab li a:hover
{
text-decoration:underline;
color:red;
}
#tab a:hover h3
{
border:1px solid #cccccc;
border-bottom:0px;
}
</style>
</head><body>
<div id="tab">
<!--选项卡标题开始-->
<h3 class="up" onmouseover="go_to(1);">选项一</h3>
<!--选项卡标题结束-->
<!--选项卡内容开始-->
<div class="blank">
<ul>
<li><a href="#" title="超银行利率4倍不受保护">超银行利率4倍不受保护</a></li>
<li><a href="#" title="超银行利率4倍不受保护">超银行利率4倍不受保护</a></li>
<li><a href="#" title="超银行利率4倍不受保护">超银行利率4倍不受保护</a></li>
<li><a href="#" title="超银行利率4倍不受保护">超银行利率4倍不受保护</a></li>
<li><a href="#" title="超银行利率4倍不受保护">超银行利率4倍不受保护</a></li>
<li><a href="#" title="超银行利率4倍不受保护">超银行利率4倍不受保护</a></li>
<li><a href="#" title="超银行利率4倍不受保护">超银行利率4倍不受保护</a></li>
<li><a href="#" title="超银行利率4倍不受保护">超银行利率4倍不受保护</a></li>
<li><a href="#" title="超银行利率4倍不受保护">超银行利率4倍不受保护</a></li>
<li><a href="#" title="超银行利率4倍不受保护">超银行利率4倍不受保护</a></li>
<li><a href="#" title="超银行利率4倍不受保护">超银行利率4倍不受保护</a></li>
<li><a href="#" title="超银行利率4倍不受保护">超银行利率4倍不受保护</a></li>
</ul>
</div>
<!--选项卡内容结束-->
<!--选项卡标题开始-->
<h3 onmouseover="go_to(2);">选项二</h3>
<!--选项卡标题结束-->
<!--选项卡内容开始-->
<div>
<ul>
<li><a href="#" title="欧洲央行前副行长出任希腊总理今日就职">欧洲央行前副行长出任希腊总理今日就职</a></li>
<li><a href="#" title="欧洲央行前副行长出任希腊总理今日就职">欧洲央行前副行长出任希腊总理今日就职</a></li>
<li><a href="#" title="欧洲央行前副行长出任希腊总理今日就职">欧洲央行前副行长出任希腊总理今日就职</a></li>
<li><a href="#" title="欧洲央行前副行长出任希腊总理今日就职">欧洲央行前副行长出任希腊总理今日就职</a></li>
<li><a href="#" title="欧洲央行前副行长出任希腊总理今日就职">欧洲央行前副行长出任希腊总理今日就职</a></li>
<li><a href="#" title="欧洲央行前副行长出任希腊总理今日就职">欧洲央行前副行长出任希腊总理今日就职</a></li>
<li><a href="#" title="欧洲央行前副行长出任希腊总理今日就职">欧洲央行前副行长出任希腊总理今日就职</a></li>
<li><a href="#" title="欧洲央行前副行长出任希腊总理今日就职">欧洲央行前副行长出任希腊总理今日就职</a></li>
<li><a href="#" title="欧洲央行前副行长出任希腊总理今日就职">欧洲央行前副行长出任希腊总理今日就职</a></li>
<li><a href="#" title="欧洲央行前副行长出任希腊总理今日就职">欧洲央行前副行长出任希腊总理今日就职</a></li>
<li><a href="#" title="欧洲央行前副行长出任希腊总理今日就职">欧洲央行前副行长出任希腊总理今日就职</a></li>
<li><a href="#" title="欧洲央行前副行长出任希腊总理今日就职">欧洲央行前副行长出任希腊总理今日就职</a></li>
<li><a href="#" title="欧洲央行前副行长出任希腊总理今日就职">欧洲央行前副行长出任希腊总理今日就职</a></li>
<li><a href="#" title="欧洲央行前副行长出任希腊总理今日就职">欧洲央行前副行长出任希腊总理今日就职</a></li>
</ul>
</div>
<!--选项卡内容结束-->
<!--选项卡标题开始-->
<h3 onmouseover="go_to(3);">选项三</h3>
<!--选项卡标题结束-->
<!--选项卡内容开始-->
<div>
<ul>
<li><a href="#" title="新观察：底层社会我们了解多少">新观察：底层社会我们了解多少</a></li>
<li><a href="#" title="新观察：底层社会我们了解多少">新观察：底层社会我们了解多少</a></li>
<li><a href="#" title="新观察：底层社会我们了解多少">新观察：底层社会我们了解多少</a></li>
<li><a href="#" title="新观察：底层社会我们了解多少">新观察：底层社会我们了解多少</a></li>
<li><a href="#" title="新观察：底层社会我们了解多少">新观察：底层社会我们了解多少</a></li>
<li><a href="#" title="新观察：底层社会我们了解多少">新观察：底层社会我们了解多少</a></li>
<li><a href="#" title="新观察：底层社会我们了解多少">新观察：底层社会我们了解多少</a></li>
<li><a href="#" title="新观察：底层社会我们了解多少">新观察：底层社会我们了解多少</a></li>
<li><a href="#" title="新观察：底层社会我们了解多少">新观察：底层社会我们了解多少</a></li>
<li><a href="#" title="新观察：底层社会我们了解多少">新观察：底层社会我们了解多少</a></li>
<li><a href="#" title="新观察：底层社会我们了解多少">新观察：底层社会我们了解多少</a></li>
</ul>
</div>
<!--选项卡内容结束-->
<!--选项卡标题开始-->
<h3 onmouseover="go_to(4);">选项四</h3>
<!--选项卡标题结束-->
<!--选项卡内容开始-->
<div>
<ul>
<li><a href="#" title="俄罗斯将于明夏加入世界贸易">俄罗斯将于明夏加入世界贸易组织</a></li>
<li><a href="#" title="俄罗斯将于明夏加入世界贸易">俄罗斯将于明夏加入世界贸易组织</a></li>
<li><a href="#" title="俄罗斯将于明夏加入世界贸易">俄罗斯将于明夏加入世界贸易组织</a></li>
<li><a href="#" title="俄罗斯将于明夏加入世界贸易">俄罗斯将于明夏加入世界贸易组织</a></li>
<li><a href="#" title="俄罗斯将于明夏加入世界贸易">俄罗斯将于明夏加入世界贸易组织</a></li>
<li><a href="#" title="俄罗斯将于明夏加入世界贸易">俄罗斯将于明夏加入世界贸易组织</a></li>
<li><a href="#" title="俄罗斯将于明夏加入世界贸易">俄罗斯将于明夏加入世界贸易组织</a></li>
<li><a href="#" title="俄罗斯将于明夏加入世界贸易">俄罗斯将于明夏加入世界贸易组织</a></li>
<li><a href="#" title="俄罗斯将于明夏加入世界贸易">俄罗斯将于明夏加入世界贸易组织</a></li>
</ul>
</div>
<!--选项卡内容结束-->
</div>
<script type="text/javascript">
<!--
var h=document.getElementById("tab").getElementsByTagName("h3");
var d=document.getElementById("tab").getElementsByTagName("div");
function go_to(ao)
{
for(var i=0;i<h.length;i++)
{
if(ao-1==i)
{
h[i].className="up";
d[i].className="blank";
}
else
{
h[i].className=" ";
d[i].className=" ";
}
}
}
//-->
</script>
</body>
</html>
思考：这种效果是鼠标移动到选项卡标题上的时候，选项卡内容就会自动变化，那么怎么设置当鼠标点击选项卡标题的时候选项卡内容才变换呢？很简单，只需要将每个h3中的onmouseover="go_to(X);"修改为onclick="go_to(X)"就可以了，X代表1到4
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 使Eclipse下支持编写HTML/JS/CSS/JSP页面的自动提示
- frameset在jsp页面制作导航栏详解
- jsp页面引入css文件报错 javax.servlet cannot be resolved to a type
- maven关于jsp页面加载图片和css路径的问题
- struts2下，jsp视图页面中CSS和javascript引用相对路径和绝对路径问题。
- 引用外部.css或.js文件的路径问题--jsp或html页面或是在web项目中的引用
- 于jQuery+CSS制作的选项卡
- 关于JAVA EE项目在WEB-INF目录下的jsp页面如何访问WebRoot中的CSS和JS文件
- 修改css文件后，jsp页面在IE8中预览部分样式突然失效的原因
- DIV+CSS布局入门示例（四）页面顶部 列表<li>制作菜单
- 在jsp页面下, 让eclipse完全支持HTML/JS/CSS智能提示
- web项目的WEB-INF/jsp文件下面的jsp页面引用webRoot文件夹下面的css，js等文件失败
- [CSS+JS]同一页面可以重复使用的选项卡
- 大学生简单网页div+css网页纯手写代码制作html静态页面切图排版
- Div+CSS布局入门教程之三：页面顶部制作之一
- jsp页面中html,javascript.css的执行顺序
- JSP制作登录页面：login.jsp
- 配置Eclipse编写HTML/JS/CSS/JSP页面的自动提示
- Div+CSS布局入门教程之四：页面顶部制作之二
- 在jsp页面下, 让eclipse完全支持HTML/JS/CSS智能提示