关于框架页面导航菜单点击后高亮显示的问题
我有一个框架页面左边窗口是导航菜单，链接都在右边窗口中打开，现在我想点击左边的导航菜单后，在右边窗口打开这个页面，同时左边被点击的链接样式和其它几个不一样这个效果要怎么实...
我有一个框架页面
左边窗口是导航菜单，链接都在右边窗口中打开，
现在我想点击左边的导航菜单后，在右边窗口打开这个页面，同时左边被点击的链接样式和其它几个不一样
这个效果要怎么实现？ 展开
左边窗口是导航菜单，链接都在右边窗口中打开，
现在我想点击左边的导航菜单后，在右边窗口打开这个页面，同时左边被点击的链接样式和其它几个不一样
这个效果要怎么实现？ 展开
5个回答
展开全部
给你个演示代码,用框架不好给代码,是在本页显示的,改成框架也很容易
<!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=gb2312" />
<title>左侧选项卡效果的菜单导航</title>
</head>
<body>
<!--top menu-->
<style type="text/css">
<!--
* {font-size:13px;font-family:Arial;}
#nav li {list-style:none; width:120px; margin-top:0;padding:4px 6px;}
#nav li a {text-decoration:none; color:#666;}
#nav li a:hover {color:#000;}
.aa {border-top:3px solid #AAC7E9;border-right:1px solid #AAC7E9;border-bottom:1px solid #AAC7E9; background:#E8F5FE;border-left:1px solid #AAC7E9;cursor:hand;}
.bb {border-top:3px solid #ff9900;border-right:1px solid #AAC7E9;border-bottom:1px solid #AAC7E9; border-left:1px solid #AAC7E9;background:#FFFFDD;cursor:hand;}
.cc {border-top:4px solid #ff66ff; background:#fcf;cursor:hand;}
.list2 { font-size:13px; line-height:20px; padding:3px;text-align:left;background:#FFFFFF;}
.list2 li{ color:#333333;font-size:13px; line-height:24px; padding:0 0 0 10px;background:url(/images/dot1.gif) no-repeat 2px 12px;}
.list2 a{ text-decoration: underline;}
.lfloat {float:left;}
.rfloat {float:right;}
.ctt{padding:0;clear:both;border-top:1px solid #AAC7E9;border-right:1px solid #AAC7E9;border-bottom:1px solid #AAC7E9;text-align:left;height:317px;}
.dis{display:block;}
.undis{display:none;}
li{list-style: none;}
form, ul { padding:0; margin:0;}
-->
</style>
<div style="width:600px">
<div class="lfloat" style="width:126px">
<ul id="nav">
<li class="aa" id="tb_1" onClick="x:hoverli(1);">我要找下载...</li>
<li class="bb" id="tb_2" onClick="i:hoverli(2);">我要找文章...</li>
<li class="aa" id="tb_3" onClick="x:hoverli(3);">有问题要问...</li>
<li class="aa" id="tb_4" onClick="x:hoverli(4);">去论坛逛逛...</li>
<li class="aa" id="tb_5" onClick="x:hoverli(5);">欣赏下酷站...</li>
<li class="aa" id="tb_6" onClick="x:hoverli(6);">收藏JS特效...</li>
<li class="aa" id="tb_7" onClick="x:hoverli(7);">找工作找人...</li>
<li class="aa" id="tb_8" onClick="x:hoverli(8);">在线工具箱...</li>
<li class="aa" id="tb_9" onClick="x:hoverli(9);">供求留言板...</li>
<li class="aa" id="tb_10" onClick="x:hoverli(10);">程序员之家...</li>
<li class="aa" id="tb_11" onClick="x:hoverli(11);">互联网动态...</li>
</ul>
</div>
<div class="lfloat" style="width:450px;">
<div id="newinfo">
<div class="ctt list2">
<div class="dis" id="tbc_01">
下载...
</div>
<div class="undis" id="tbc_02">
文章...
</div>
<div class="undis" id="tbc_03">
问吧...
</div>
<div class="undis" id="tbc_04">
论坛...
</div>
<div class="undis" id="tbc_05">
酷站...
</div>
<div class="undis" id="tbc_06">
特效...
</div>
<div class="undis" id="tbc_07">
工作...
</div>
<div class="undis" id="tbc_08">
工具...
</div>
<div class="undis" id="tbc_09">
留言...
</div>
<div class="undis" id="tbc_010">
空间...
</div>
<div class="undis" id="tbc_011">
新闻...
</div>
</div>
</div>
</div>
</div>
</div>
<!--div no.1-->
<!--快速导航栏-->
<script type="text/javascript" language="javascript">
function g(o){return document.getElementById(o);}
function hoverli(n){
for(var i=1;i<=11;i++){g('tb_'+i).className='aa';g('tbc_0'+i).className='undis';}g('tbc_0'+n).className='list2';g('tb_'+n).className='bb';
}
</script>
</body>
</html>
<!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=gb2312" />
<title>左侧选项卡效果的菜单导航</title>
</head>
<body>
<!--top menu-->
<style type="text/css">
<!--
* {font-size:13px;font-family:Arial;}
#nav li {list-style:none; width:120px; margin-top:0;padding:4px 6px;}
#nav li a {text-decoration:none; color:#666;}
#nav li a:hover {color:#000;}
.aa {border-top:3px solid #AAC7E9;border-right:1px solid #AAC7E9;border-bottom:1px solid #AAC7E9; background:#E8F5FE;border-left:1px solid #AAC7E9;cursor:hand;}
.bb {border-top:3px solid #ff9900;border-right:1px solid #AAC7E9;border-bottom:1px solid #AAC7E9; border-left:1px solid #AAC7E9;background:#FFFFDD;cursor:hand;}
.cc {border-top:4px solid #ff66ff; background:#fcf;cursor:hand;}
.list2 { font-size:13px; line-height:20px; padding:3px;text-align:left;background:#FFFFFF;}
.list2 li{ color:#333333;font-size:13px; line-height:24px; padding:0 0 0 10px;background:url(/images/dot1.gif) no-repeat 2px 12px;}
.list2 a{ text-decoration: underline;}
.lfloat {float:left;}
.rfloat {float:right;}
.ctt{padding:0;clear:both;border-top:1px solid #AAC7E9;border-right:1px solid #AAC7E9;border-bottom:1px solid #AAC7E9;text-align:left;height:317px;}
.dis{display:block;}
.undis{display:none;}
li{list-style: none;}
form, ul { padding:0; margin:0;}
-->
</style>
<div style="width:600px">
<div class="lfloat" style="width:126px">
<ul id="nav">
<li class="aa" id="tb_1" onClick="x:hoverli(1);">我要找下载...</li>
<li class="bb" id="tb_2" onClick="i:hoverli(2);">我要找文章...</li>
<li class="aa" id="tb_3" onClick="x:hoverli(3);">有问题要问...</li>
<li class="aa" id="tb_4" onClick="x:hoverli(4);">去论坛逛逛...</li>
<li class="aa" id="tb_5" onClick="x:hoverli(5);">欣赏下酷站...</li>
<li class="aa" id="tb_6" onClick="x:hoverli(6);">收藏JS特效...</li>
<li class="aa" id="tb_7" onClick="x:hoverli(7);">找工作找人...</li>
<li class="aa" id="tb_8" onClick="x:hoverli(8);">在线工具箱...</li>
<li class="aa" id="tb_9" onClick="x:hoverli(9);">供求留言板...</li>
<li class="aa" id="tb_10" onClick="x:hoverli(10);">程序员之家...</li>
<li class="aa" id="tb_11" onClick="x:hoverli(11);">互联网动态...</li>
</ul>
</div>
<div class="lfloat" style="width:450px;">
<div id="newinfo">
<div class="ctt list2">
<div class="dis" id="tbc_01">
下载...
</div>
<div class="undis" id="tbc_02">
文章...
</div>
<div class="undis" id="tbc_03">
问吧...
</div>
<div class="undis" id="tbc_04">
论坛...
</div>
<div class="undis" id="tbc_05">
酷站...
</div>
<div class="undis" id="tbc_06">
特效...
</div>
<div class="undis" id="tbc_07">
工作...
</div>
<div class="undis" id="tbc_08">
工具...
</div>
<div class="undis" id="tbc_09">
留言...
</div>
<div class="undis" id="tbc_010">
空间...
</div>
<div class="undis" id="tbc_011">
新闻...
</div>
</div>
</div>
</div>
</div>
</div>
<!--div no.1-->
<!--快速导航栏-->
<script type="text/javascript" language="javascript">
function g(o){return document.getElementById(o);}
function hoverli(n){
for(var i=1;i<=11;i++){g('tb_'+i).className='aa';g('tbc_0'+i).className='undis';}g('tbc_0'+n).className='list2';g('tb_'+n).className='bb';
}
</script>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
在<head>标签里添加如下代码
<style type="text/css">
网页所以连接为蓝色,无下划线
A{
color:blue;
text-decoration:none;
}
鼠标悬停连接时为黄色
A:hover{
color:yellow;
text-decoration:none;
}
已访问为红色
A:visited{
color:red;
text-decoration:none;
}
</style>
<style type="text/css">
网页所以连接为蓝色,无下划线
A{
color:blue;
text-decoration:none;
}
鼠标悬停连接时为黄色
A:hover{
color:yellow;
text-decoration:none;
}
已访问为红色
A:visited{
color:red;
text-decoration:none;
}
</style>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
我晕....2L真行,恐怕再笨的人也知道这个代码要放在导航页面......不要怀疑LZ智商.....楼主,我这个马P拍的舒不舒服?
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
楼上不完全正确。以上代码需在导航页面加入。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（3）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
