CSS+JS选项卡式导航菜单 -

gucy

浏览: 12072 次
性别:
来自: 北京

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

CSS+JS选项卡式导航菜单

博客分类：

前台

CSS JSP

CSS+JS选项卡式导航菜单
第一次模仿使用
menu.jsp

<%@ page language="java" pageEncoding="utf-8"%>

<HTML>

<HEAD>

<TITLE>CSS+JS选项卡式导航菜单</TITLE>

<META NAME="Generator" CONTENT="EditPlus">

<META NAME="Author" CONTENT="">

<META NAME="Keywords" CONTENT="">

<META NAME="Description" CONTENT="">

<META http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style>
td {
padding: 5px 10px;
color: #ffffff;
font-weight: 700;
font-size: 13px;
}

.tdBg {
background-color: #ffffff;
color: #000000;
background-repeat: no-repeat;
background-position: 0px;
display: block;
float: left;
font-family: arial, nsimsun, sans-serif;
font-size: 1.0em;
hasLayout: -1;
list-style-type: none;
margin: 0px;
width: 178px;
text-align: center;
}

.td_menu {
background-color: #172730;
background-image: url('/dflw/images/center_bg.jpg');
background-repeat: no-repeat;
background-position: 0px;
display: block;
float: left;
font-family: arial, nsimsun, sans-serif;
font-size: 1.0em;
hasLayout: -1;
list-style-type: none;
margin: 0px;
width: 178px;
text-align: center;
}
</style>

</HEAD>

<BODY>

<table border=0 cellpadding=0 cellspacing=0>

<tr style="margin-bottom: 0px;">

<td onclick='checkTdBg(this);' class="td_menu">
关注动态
</td>

<td onclick='checkTdBg(this);' class="td_menu">
选择产品与解决方案
</td>

<td onclick='checkTdBg(this);' class="td_menu">
获取服务
</td>

<td onclick='checkTdBg(this);' class="td_menu">
了解龙为
</td>

</tr>
<tr>
<td colspan=4 style="margin: 0px; padding: 0px;">
<iframe id=main name="main" src="MyJsp.jsp" frameborder="0"
style="width: 100%;"></iframe>
</td>
</tr>

</table>

<br>
<br>



<a href="mailto:yixiuwang001@163.com">yixiuwang001@163.com</a>

<a href='mailto:blackwjw2009@126.com'>给我发送邮件</a>

<SCRIPT LANGUAGE="JavaScript">

        

        </SCRIPT>

</BODY>

</HTML>

根据选项卡的选择，换用不同的子页面： sup.jsp 1,2…… 原型

sub.jsp
<%@ page language="java" pageEncoding="utf-8"%>
<HTML>
<HEAD>

<TITLE>关注动态</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.div_block {
display: block;
float: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
hasLayout: -1;
margin: 0.75em auto auto;
width: 33.3%;
}

.h_ {
display: block;
font-family: arial, nsimsun, sans-serif;
font-size: 1em;
font-weight: 700;
margin: 0px 0em 0.25em;
padding: 0px 0px 0px 10px;
float: left;
}

.u_ {
display: block;
font-family: Arial, Helvetica, sans-serf; <%--
line-height: 11.52pt;
list-style-type: none; --%>
margin: 1em;
}

a.a_ {
font-family: arial, nsimsun, sans-serif;
font-size: 0.8em;
text-transform: uppercase;
}

a.ablack_ {
font-family: arial, nsimsun, sans-serif;
color: #000000;
}

a:link {
text-decoration: none
}

a:active {
text-decoration: none;
color: #ff00ff;
}

a:visited {
text-decoration: none;
}

a:hover {
text-decoration: underline;
color: green;
}
</style>
</HEAD>
<BODY>
<div class=div_block>
<div>
<h3 class=h_>
公司新闻
</h3>
<div style="text-align: right; margin-right: 80px;">
<a href="#" class=a_>>>more</a>
</div>
</div>
<ul class=u_>
<li>
<a href="#" class=ablack_>【企业管理】电力营销计费系统</a>
</li>
<li>
<a href="#" class=ablack_>【配网管理】配网监控产品系列</a>
</li>
</ul>
</div>
<div class=div_block>
<div>
<h3 class=h_>
行业新闻
</h3>
<div style="text-align: right; margin-right: 60px;">
<a href="#" class=a_>>>more</a>
</div>
</div>
<ul class=u_>
<li>
<a href="#" class=ablack_>【企业管理】供电企业绩效考核管理</a>
</li>
<li>
<a href="#" class=ablack_>【配网管理】配网监控产品系列</a>
</li>
</ul>
</div>
<div class=div_block>
<div>
<h3 class=h_>
成功案例
</h3>
<div style="text-align: right; margin-right: 60px;">
<a href="#" class=a_>>>more</a>
</div>
</div>
<ul class=u_>
<li>
<a href="#" class=ablack_>【企业管理】供电企业绩效考核管理</a>
</li>
<li>
<a href="#" class=ablack_>【配网管理】配网监控产品系列</a>
</li>
</ul>
</div>
</BODY>

</HTML>

二者结合的效果图：见附件