css设置导航菜单颜色

html-css035

css设置导航菜单颜色,第1张

有两种思路。解决

第一种：通过判断当前的页面的分类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:blockwidth:80pxheight:30pxbackground:greenfloat:left}

/*定义当前页面对应的菜单样式*/

body.product .menu li a,body.about .menu li a{display:blockwidth:100%height:100%background:red}

这样你进入产品介绍 和 公司介绍页面之后对应的CSS生效对应的菜单背景颜色会变红。。点进去变红。其他菜单还是初始样式。。

其实第二种比较麻烦。因为分别定义body加class那部分。。或者你用服务器脚本动态生成lclass 。也行。。但相比第一种还是麻烦了许多。

如果对您有帮助。还望采纳。谢谢。

1、建立一个静态页命名为change.html ，标题为js导航点击的怎么同时变图片跟字体颜色。

2、设置一个简易的导航栏。

3、加css 控制菜单的样式，并加入背景图片。

4、为li添加id，创建函数fun ，并传递传递参数。

5、为函数加入点击导航改变背景图片的代码element.style.backgroundImage="url(images/bg2.png)"

6、加入改变文字大小的代码

element.style.color="black"

//修改文字大小

  element.style.fontSize="18px"

7、然后就完成了。

1、新建一个html文件，命名为test.html。

2、在test.html文件中，使用div标签创建一个模块，并设置其id属性为tid，下面将通过该id设置其css样式。

3、在css标签内，对div进行样式设置，使用width属性设置div的宽度为200px，使用height属性设置div的宽度为20px，使用background属性设置div的背景颜色为红色。

4、在css标签内，再定义一个类名为newbg的样式，使用background属性设置背景颜色为黄色。

5、在test.html文件中，给div绑定onmouseover鼠标移动事件，当鼠标移动至div时，执行myfun（）函数。

6、在test.html文件中，在js标签内，创建一个myfun（）函数，在函数内，使用getElementById（）获得div对象，通过className（newbg）设置div的新背景颜色。