一个页面如下结构<link rel="stylesheet" type="text/css" href="/css/default.css" media="all" /><div id="nav"> {# include menus/{menu} #}</div>上面{# include menus/{menu} #}  这个文件内容如下。
<div class="box">
<h4 class="yellow rounded_by_jQuery_corners" style="-moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px;">Side Menu</h4>
<div class="box-container rounded_by_jQuery_corners" style="-moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px;"><!-- use no-padding wherever you need element padding gone -->
<ul class="list-links ui-accordion ui-widget ui-helper-reset" role="tablist">
<li><a href="/my/commute">aaa</a></li>
<li><a href="/my/salary">bbb</a></li>
<li><a href="/my/info">ccc</a></li>
<li><a href="/my/passwd">ddd</a></li>
</ul>
</div><!--end of div.box-container -->
</div><!-- end of div.box -->default.css 文件内容如下
#nav div.title  {font-size:12px}
#nav div.line  {border-bottom:1px solid #EAEAEA;}
#nav ul  {padding:0px;list-style:none;}
#nav ul li {margin:0px;font-size:12px;}
#nav ul li.active {background-color:#2B3557;border:1px solid #1A233D;color:#B0B5C2;}
#nav ul li a {cursor:pointer;color:#333333;}
#nav ul li a:hover {color:#536FE5;text-decoration:underline;}当鼠标点击aaa或bbb或ccc或ddd的时候
#nav ul li.active{background-color:#2B3557;border:1px solid#1A233D;color:#B0B5C2;} 
这句貌似没有起作用,不知道为什么? 是不是点击某个的时候 active是起作用的把? 
我看网上查看源码,发现是用如下语句实现的上面效果,就是鼠标点己某个的时候,那个字周围的背景颜色改变。

<script>
jQuery('#header>ul>li[uid=users]').addClass('active');
function left_menu(uid)
{
jQuery('#nav>ul>li[uid='+uid+']').addClass('active').text(jQuery('#nav>ul>li[uid='+uid+']').text());
}
</script>
还有一个问题,就是 csdn发表新话题中的 文章内容 旁边的写内容的时候,改变字体大小,颜色等的怎么实现?(就是问题上面 A B I U S A。 这个)

解决方案 »

  1.   

    #nav ul li.active 你这句CSS的用法  就是说 仅对#nav ul下的li标记添加.active类的时候才会有用这个定义只是为li定义了一个class而已 怎么会有作用呢??  这并不是伪类啊...
    如果.active之前有一个空格 那么就表示li的子元素可以使用这个类 如果没有空格就表示只有li标记可用这个类
    当然  你可以用js为li标记添加这个class
    你在下面写的jquery代码  就是为li标记添加这个类
      

  2.   

    #nav ul li.active{background-color:#2B3557;border:1px solid#1A233D;color:#B0B5C2;} 这句话没用把。li不能配active。要把它改成下面这个样子#nav ul li a:active{background-color:#2B3557;border:1px solid#1A233D;color:#B0B5C2;} 另外,在css中要把这句话放到link,hover之后才会起作用。
    http://www.w3school.com.cn/css/pr_pseudo_active.asp