首先,HTML部分的标签嵌套是错误的,这是不符合W3C标准的写法,
- 标签的下一级只能是
- 标签而不能是其它,另外块元素的
- 标签不能嵌套在行内元素标签内。正确的HTML代码应是:
-
关于我们
-
套餐装修
-
网上展厅
这样改后,CSS方面要调整下,使其符合你的预期效果:
.active {background:#000}
.nav li {height:40px} /* 为导航菜单下的li标签设置高度(此处假设为40px) */
.nav a {display:block; height:100%} /* 让导航菜单下的a标签占满整个li标签 */
最后是javascript部分(使用jQuery):
$(document).ready(function(){
$("#Nav > li").find("a").click(function(){
$("#Nav").find("li").removeClass("active");
$(this).parent("li").addClass("active");
});
});