CSS+JS选项卡式导航菜单
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="javascript:window.showModalDialog('test1.html','750', '400', 'customiseQuery')">发送邮件</a> -->
<a href="mailto:[email protected]">[email protected]</a>
<a href='mailto:[email protected]'>给我发送邮件</a>
<SCRIPT LANGUAGE="JavaScript">
<!--
function checkTdBg(obj){
var obj_td = document.getElementsByTagName('td');
for( var i = 0 ; i < 4 ; i ++ ){
if( obj_td[i] == obj ){
obj_td[i].className = 'tdBg';
if(i%2==0)
document.getElementById("main").src = "sub2.jsp";
else
document.getElementById("main").src = "sub1.jsp";
}
else{
obj_td[i].className = 'td_menu';
}
}
}
//-->
</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>
二者结合的效果图：见附件
第一次模仿使用
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="javascript:window.showModalDialog('test1.html','750', '400', 'customiseQuery')">发送邮件</a> -->
<a href="mailto:[email protected]">[email protected]</a>
<a href='mailto:[email protected]'>给我发送邮件</a>
<SCRIPT LANGUAGE="JavaScript">
<!--
function checkTdBg(obj){
var obj_td = document.getElementsByTagName('td');
for( var i = 0 ; i < 4 ; i ++ ){
if( obj_td[i] == obj ){
obj_td[i].className = 'tdBg';
if(i%2==0)
document.getElementById("main").src = "sub2.jsp";
else
document.getElementById("main").src = "sub1.jsp";
}
else{
obj_td[i].className = 'td_menu';
}
}
}
//-->
</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>
二者结合的效果图：见附件