[英]Why does jquery addClass not change the css
我正在使用“活动”类设置通过CSS更改颜色。
我的问题是,当我使用jquery添加/删除“活动”类时,为什么这些组件的颜色没有改变?
$(document).ready(function() {
$('#create_links_tab').click(function(){
$('#share_links_tab').removeClass("active");
$('#create_links_tab').addClass("active");
$('#share_links_panel').hide();
$('#create_links_panel').fadeIn(1500);
});
$('#share_links_tab').click(function(){
$('#create_links_tab').removeClass("active");
$('#share_links_tab').addClass("active");
$('#create_links_panel').hide();
$('#share_links_panel').fadeIn(1500);
});
});
的HTML:
//left menu
echo "<div class=\"col-md-3\">";
echo "<ul class=\"nav nav-pills nav-stacked\">";
echo "<li class=\"active\"><a id=\"create_links_tab\" style=\"cursor:pointer;\"><i class=\"fa fa-plus\"></i> Create Links</a></li>";
echo "<li><a id=\"share_links_tab\" style=\"cursor:pointer;\"><i class=\"fa fa-search\"></i> Share Links</a></li>";
echo "</ul>";
echo "</div>";
CSS:
.nav-pills>li.active>a, .nav-pills>li.active>a:hover, .nav-pills>li.active>a:focus {
color: #fff;
background-color: #428bca;
}
您正在更改<a>
元素的类,而根据CSS,您应该更改<a>
所在的<li>
元素的类。
必须将active
类分配给li
元素,在您的情况下,它是share_links_tab
和create_links_tab
元素的父create_links_tab
$(document).ready(function () {
$('#create_links_tab').click(function () {
$('#share_links_tab').parent().removeClass("active");
$('#create_links_tab').parent().addClass("active");
$('#share_links_panel').hide();
$('#create_links_panel').fadeIn(1500);
});
$('#share_links_tab').click(function () {
$('#create_links_tab').parent().removeClass("active");
$('#share_links_tab').parent().addClass("active");
$('#create_links_panel').hide();
$('#share_links_panel').fadeIn(1500);
});
});
演示: 小提琴
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.