这个导航栏效果,怎么实现?

hxf3591126 2004-11-02 09:50:09
这个导航栏效果,怎么实现?
www.951059.com/index.html
点击某个按钮后,如"新闻中心",他的背景色变成兰色,当鼠标点击另外的导航按钮后,如:"首页"这个导航按钮背景色变成兰色,而"新闻中心"兰色背景色消失,变回灰色!

请回答的具体详细一点:)
...全文
512 26 打赏 收藏 举报
写回复
26 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
hxf3591126 2004-11-15
  • 打赏
  • 举报
回复
回复人: jjgaodeng(金眼妖瞳) ( ) 信誉:100 2004-11-08 10:41:00 得分: 0
建一个css
如menu.css
.menuoff { color: #FFFFFF; font-family: "Arial", "Helvetica", "sans-serif"; font-weight: 900; font-size: 18px; background-image: url(image/BEIJING.GIF)}
.menuon { font-family: "Arial", "Helvetica", "sans-serif"; font-weight: 900; color: #000000; background-color: #FFFFFF; font-size: 18px; cursor: hand}
.dot { cursor: hand}
.dot2 { cursor: hand; filter: Light}
.mail { font-family: "仿宋_GB2312"; color: #FF0000}

引用时
class="menu" onMouseOver="this.className='menuon'" onMouseOut="this.className='menuoff'" onClick=winOpen('default.htm')

效果差不多了
____________________________________________________________________________
____________________________________________________________________________
这个css是不是还少定义了个"menu",这个该这么定义呢?
____________________________________________________________________________
____________________________________________________________________________
hxf3591126 2004-11-12
  • 打赏
  • 举报
回复
回复人: jjgaodeng(金眼妖瞳) ( ) 信誉:100 2004-11-08 10:41:00 得分: 0
建一个css
如menu.css
.menuoff { color: #FFFFFF; font-family: "Arial", "Helvetica", "sans-serif"; font-weight: 900; font-size: 18px; background-image: url(image/BEIJING.GIF)}
.menuon { font-family: "Arial", "Helvetica", "sans-serif"; font-weight: 900; color: #000000; background-color: #FFFFFF; font-size: 18px; cursor: hand}
.dot { cursor: hand}
.dot2 { cursor: hand; filter: Light}
.mail { font-family: "仿宋_GB2312"; color: #FF0000}

引用时
class="menu" onMouseOver="this.className='menuon'" onMouseOut="this.className='menuoff'" onClick=winOpen('default.htm')

效果差不多了
_________________________________________________________________________________
_________________________________________________________________________________
这个css是不是还少定义了个"menu",这个该这么定义呢?
_________________________________________________________________________________
_________________________________________________________________________________
hanyun229 2004-11-10
  • 打赏
  • 举报
回复
<td><a href="111.asp" class="menu" onMouseOver="this.className='menuon'" onMouseOut="this.className='menuoff'" onClick=winOpen('default.htm')>111</a></td>
MingOuyang 2004-11-10
  • 打赏
  • 举报
回复
同意,这样就可以有楼主说的效果了。
jjgaodeng 2004-11-08
  • 打赏
  • 举报
回复
建一个css
如menu.css
.menuoff { color: #FFFFFF; font-family: "Arial", "Helvetica", "sans-serif"; font-weight: 900; font-size: 18px; background-image: url(image/BEIJING.GIF)}
.menuon { font-family: "Arial", "Helvetica", "sans-serif"; font-weight: 900; color: #000000; background-color: #FFFFFF; font-size: 18px; cursor: hand}
.dot { cursor: hand}
.dot2 { cursor: hand; filter: Light}
.mail { font-family: "仿宋_GB2312"; color: #FF0000}

引用时
class="menu" onMouseOver="this.className='menuon'" onMouseOut="this.className='menuoff'" onClick=winOpen('default.htm')

效果差不多了
hanyun229 2004-11-08
  • 打赏
  • 举报
回复
function setAcss(id_num,cap)应该是没有参数
function setAcss()
hanyun229 2004-11-08
  • 打赏
  • 举报
回复
<a…… id="open_menu" onclik="javascript:setAcss();">11111</a>
<a…… id="open_menu" onclik="javascript:setAcss();">22222</a>
<a…… id="open_menu" onclik="javascript:setAcss();">33333</a>
<script language="javascript">
function setAcss(id_num,cap)
{
obj = window.event.srcElement;
for (var i=0;i<document.all.length;i++)
{
var e = document.all[i];
if (e.id == 'open_menu'){
e.style.background-color = 'write';
}
}
obj.style.background-color = 'blue';
}
</script>
当然是最好是你自己写个CSS
hxf3591126 2004-11-08
  • 打赏
  • 举报
回复
jianbin2001(追风无敌):
详细点啊,我很菜,就看你这么几句,不是很明白啊!
hxf3591126 2004-11-08
  • 打赏
  • 举报
回复
jjgaodeng(金眼妖瞳):
比如:
<td><a href="111.asp" >111</a></td>
<td><a href="222.asp" >222</a></td>

怎么调用啊?
class="menu" onMouseOver="this.className='menuon'" onMouseOut="this.className='menuoff'" onClick=winOpen('default.htm')
jianbin2001 2004-11-07
  • 打赏
  • 举报
回复
用JS获取每页网址的内容,再对取到的值做一下判断就行了
判断用location对象就行了
hxf3591126 2004-11-05
  • 打赏
  • 举报
回复
wayne82(wayne(正在观注奥运~~~~):
太一般了吧.
wayne82 2004-11-05
  • 打赏
  • 举报
回复
很简单~~
每一页的头都做一下,比如:在新闻中心,就把新闻中心那个页面做成那种样子~~
在首页,,就把首页做成那个样子
hxf3591126 2004-11-05
  • 打赏
  • 举报
回复
yksy(y``y):
css好象做不到的!?
yksy 2004-11-05
  • 打赏
  • 举报
回复
用css定义
hxf3591126 2004-11-05
  • 打赏
  • 举报
回复
rardge(Rardge) :
你的太麻烦了,
我想找个比较方便的办法:)
hxf3591126 2004-11-05
  • 打赏
  • 举报
回复
ding到高手出来:)
hxf3591126 2004-11-04
  • 打赏
  • 举报
回复
顶啊
rardge 2004-11-04
  • 打赏
  • 举报
回复
写一个JS脚本文件 banner.js 内容如下:
/****************************
* Show Main Menu Bar
****************************/
function ShowMainMenu(m)
{
with(document)
{
//****************************主导航条表格***************************
write("<div align='center'>");
write("<table border='0' width='770' cellspacing='0' cellpadding='0'>");
write("<tr><td width=100% height='20' align='center' bgcolor='#000080'>");
write("<font color='#FFFFFF'>");

//****************************主导航条*******************************
write(m==0?"<font color='#00ff00'>":"<a class='b' href='policy.htm'>");
write("首页");
write(m==0?"</font>":"</a>");
write(" · ");

write(m==1?"<font color='#00ff00'>":"<a class='b' href='policy.htm'>");
write("第二个");
write(m==1?"</font>":"</a>");
write(" · ");

write(m==2?"<font color='#00ff00'>":"<a class='b' href='policy.htm'>");
write("第三个");
write(m==2?"</font>":"</a>");
write(" · ");

write(m==3?"<font color='#00ff00'>":"<a class='b' href='policy.htm'>");
write("第四个");
write(m==3?"</font>":"</a>");
write("");
//*******************************************************************
write("</font></td></tr></table></div>");
}
}

然后每个网页调用这个文件,并调用这个函数,比如:ShowMainMenu(0),括号中的参数是和上面那个脚本对应的,用哪个导航栏,就用哪个数值。这个就是显示首页,并且,菜单"首页"的颜色和其它导航菜单不一样,因为同时只有一个判断条件为真。
关键是用if判断传入的参数,然后采取相应的动作。我是用 ? : 操作符。
你自己再加入代码调试一下吧。
hxf3591126 2004-11-03
  • 打赏
  • 举报
回复
来人呀!
hxf3591126 2004-11-02
  • 打赏
  • 举报
回复
希望能够有个更方便的方法,把效果直接做在头文件中,其他需要该头文件的,调用就成的方法!

谢谢你的回复,但是我要更好点方法;(
回复人: ice_berg16(寻梦的稻草人)
页面不一样,只要将对应的页面的栏目背景设成蓝色就行了.


加载更多回复(6)
发帖
JavaScript

8.7w+

社区成员

Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
帖子事件
创建了帖子
2004-11-02 09:50
社区公告
暂无公告