一个页面如下结构<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。 这个)
<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。 这个)
如果.active之前有一个空格 那么就表示li的子元素可以使用这个类 如果没有空格就表示只有li标记可用这个类
当然 你可以用js为li标记添加这个class
你在下面写的jquery代码 就是为li标记添加这个类
http://www.w3school.com.cn/css/pr_pseudo_active.asp