如何解决CSS当前/活动li
| 只是做一个Ajax页面,它利用ul li菜单。 演示:http://sitehelp.com.au/demos/ajax/ 代码是(css)#top #menu{
float: left;
list-style-type: none;
margin: 0px 0 0 0px;
}
#top #menu li{
position:relative;
left:300px;
top:-22px;
margin-right: 16px;
text-transform: uppercase;
color: #3399ff;
font-size:18px;
font-weight:bold;
display:inline;
}
#top #menu li:hover{
color: #ec008c;
cursor: pointer;
text-decoration:underline;
}
的HTML是:
<ul id=\"menu\">
<li id=\"home\">Info</li>
<li id=\"press\">Press</li>
<li id=\"trade\">Trade</li>
</ul>
这些链接通过jquery触发ajax请求,以动态加载内部和外部页面……这不是问题。
我不能让li处于当前状态或li处于活动状态。
菜单需要保持原样,所以我确定要有一个css方法来显示菜单,如下所示:(当我们在该ajax页面上时。)
信息媒体
因此,说我们单击PRESS链接,我们可以控制其在页面上的效果。换句话说,它是下划线或粗体..或其他。一个类=“选择”或“活动”的类...我很困惑
解决方法
在您的menu.js文件中,尝试将其添加到代码中:
//Manage click events
sections.click(function(){
//show the loading bar
showLoading();
// ADD THIS?
sections.removeClass(\'current\');
$(this).addClass(\'current\');
//load selected section
switch(this.id){
case \"home\": // etc etc...
现在只需为此添加一些可爱的CSS ...
#menu li.current {
font-weight:bold; /* or whatever... */
}
祝好运!
, 看来您的问题是您添加:active
的方式
你写了
\“我有:#top #menu li.active{text-decoration:underline;}
\”
你需要
#top #menu li:active{font-weight:bold;}
注意the7而不是ѭ8
另请注意,因为您已经在:hover
上进行了text-decoration
的操作,所以您需要将样式font-weight
而不是text-decoration
。
, 您可以使用一些jquery将活动类添加到单击的菜单项。
在此处查看解决方案:http://jsfiddle.net/K6F8m/
, 在您的click函数中,添加一行,将active
类添加到所单击的项目中,并从其他项目中删除active
类。
, 为此,您需要JS和CSS。
JS
sections.click(function(){
...
sections.removeClass(\"active\");
$(this).addClass(\"active\");
...
});
的CSS
#top #menu li.active { text-decoration:underline; }
, 只需在用户单击链接时将一个类添加到链接,然后将其从所有其他链接中删除即可。
$(\'#menu a\').live(\'click\',function(){
$(\'#menu a\').removeClass(\'active\');
$(this).addClass(\'active\');
});
然后设置css类的样式。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。