css设置导航菜单颜色 30
假设有两个链接，公司介绍和产品介绍；当浏览公司介绍这个页面的时候，这个“公司介绍”这个菜单的背景颜色不同于其他的，也就是说，正在访问的页面的这个菜单的链接颜色是与其他链接...
假设有两个链接，公司介绍 和产品介绍；当浏览公司介绍这个页面的时候，这个“公司介绍”这个菜单的背景颜色不同于其他的，也就是说，正在访问的页面的这个菜单的链接颜色是与其他链接背景颜色不同。
不是link，hover等能解决的。求高手解决。 展开
不是link，hover等能解决的。求高手解决。 展开
5个回答
展开全部
有两种思路。解决
第一种：通过判断当前的页面的分类ID和每个菜单的ID进行对比，哪个菜单的ID等于当前页面的分类ID。。那么给其添加一个CLASS让其样式发生变化。。这种方法需要PHP ASP .NET等WEB服务器脚本辅助实现。
第二种：就是通过纯CSS实现。。简单点说就是给每个菜单进点击进入的页面的body元素各添加一个class.然后通过CSS层叠样式表定义其页面击后的效果。示例如下
如果是产品介绍的页面那么body元素添加一个样式<body class=“product”>
介绍页面呢给body元素再添加另一个样式<body class='about'>
其他页面以此类推
然后在样式表中这样定义点击后的页面的样式
/*定义菜单的初始样式*/
.menu li a{display:block;width:80px;height:30px;background:green;float:left;}
/*定义当前页面对应的菜单样式*/
body.product .menu li a,body.about .menu li a{display:block;width:100%;height:100%;background:red;}
这样你进入产品介绍 和 公司介绍页面之后对应的CSS生效对应的菜单背景颜色会变红。。点进去变红。其他菜单还是初始样式。。
其实第二种比较麻烦。因为分别定义body加class那部分。。或者你用服务器脚本动态生成lclass 。也行。。但相比第一种还是麻烦了许多。
如果对您有帮助。还望采纳。谢谢。
第一种：通过判断当前的页面的分类ID和每个菜单的ID进行对比，哪个菜单的ID等于当前页面的分类ID。。那么给其添加一个CLASS让其样式发生变化。。这种方法需要PHP ASP .NET等WEB服务器脚本辅助实现。
第二种：就是通过纯CSS实现。。简单点说就是给每个菜单进点击进入的页面的body元素各添加一个class.然后通过CSS层叠样式表定义其页面击后的效果。示例如下
如果是产品介绍的页面那么body元素添加一个样式<body class=“product”>
介绍页面呢给body元素再添加另一个样式<body class='about'>
其他页面以此类推
然后在样式表中这样定义点击后的页面的样式
/*定义菜单的初始样式*/
.menu li a{display:block;width:80px;height:30px;background:green;float:left;}
/*定义当前页面对应的菜单样式*/
body.product .menu li a,body.about .menu li a{display:block;width:100%;height:100%;background:red;}
这样你进入产品介绍 和 公司介绍页面之后对应的CSS生效对应的菜单背景颜色会变红。。点进去变红。其他菜单还是初始样式。。
其实第二种比较麻烦。因为分别定义body加class那部分。。或者你用服务器脚本动态生成lclass 。也行。。但相比第一种还是麻烦了许多。
如果对您有帮助。还望采纳。谢谢。
已赞过
已踩过<
你对这个回答的评价是？
展开全部
加个class选择器就可以了。比如，在公司介绍页面，给“公司介绍”这个链接加上class=“now”；在产品介绍页面，则给“产品介绍”这个链接加上class=“now”。
然后，你只需要用css定义正在访问的页面的相应菜单的样式就可以了。比如：
.now { background-color: #cccccc; }
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
需要后台配合 ，或者 公司介绍 和 产品介绍 用不同的模板。
后台处理当访问导航时，给当前导航 添加一个样式。
后台处理当访问导航时，给当前导航 添加一个样式。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
没看懂。。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
这里需要server script来判断当前页面是属于哪个菜单，然后设置该菜单的class
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（3）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
