社区
JavaScript
帖子详情
这个导航栏效果,怎么实现?
hxf3591126
2004-11-02 09:50:09
这个导航栏效果,怎么实现?
www.951059.com/index.html
点击某个按钮后,如"新闻中心",他的背景色变成兰色,当鼠标点击另外的导航按钮后,如:"首页"这个导航按钮背景色变成兰色,而"新闻中心"兰色背景色消失,变回灰色!
请回答的具体详细一点:)
...全文
512
26
打赏
收藏
这个导航栏效果,怎么实现?
这个导航栏效果,怎么实现? www.951059.com/index.html 点击某个按钮后,如"新闻中心",他的背景色变成兰色,当鼠标点击另外的导航按钮后,如:"首页"这个导航按钮背景色变成兰色,而"新闻中心"兰色背景色消失,变回灰色! 请回答的具体详细一点:)
复制链接
扫一扫
分享
举报
写回复
配置赞助广告
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)
相关推荐
导航
栏
效果
,
实现
简单的
导航
栏
效果
切换
导航
栏
效果
,
实现
简单的
导航
栏
效果
切换,带有动画特效
GOOGLE首页
导航
栏
动态图片
实现
效果
GOOGLE首页
导航
栏
动态图片
实现
效果
GOOGLE首页
导航
栏
动态图片
实现
效果
GOOGLE首页
导航
栏
动态图片
实现
效果
CSS
实现
动画特效
导航
栏
0 写在前面 今天用纯CSS编写了一种带有特效的
导航
栏
,一方面巩固熟悉了
导航
栏
的一般写法,另一方面练习了CSS3的一些新特性。 1
实现
效果
当鼠标划过时,
实现
了一种动态百叶窗
效果
。 2
实现
细节 2-0
导航
栏
基本架构 首先复习
导航
栏
的基本架构,
导航
栏
的
实现
,采用的是ul-li的结构,为了能够
实现
导航
效果
,可以在li内部增加一个a标签。
实现
导航
...
Android学习之BottomNavigationBar
实现
Android特色底部
导航
栏
Android底部
导航
栏
的
实现
方式特别多,例如TabHost,TabLayout,或者TextView等,都可以
实现
底部
导航
栏
的
效果
,但是却没有Google官方统一的
导航
栏
样式,今天讲的就是Google最近添加到Material design中的底部
导航
栏
BottomNavigationBar,也可以说是现今Android底部
导航
栏
的一个标准与统一吧。
效果
:
实现
效果
:
实现
:
发帖
JavaScript
JavaScript
Web 开发 JavaScript
复制链接
扫一扫
8.7w+
社区成员
22.4w+
社区内容
Web 开发 JavaScript
社区管理员
加入社区
获取链接或二维码
帖子事件
创建了帖子
2004-11-02 09:50
社区公告
暂无公告