我使用jQuery将一个Class添加到几个元素中。
我不是新添加类,也不是删除它们。但我对样式仍然有点中间,任何灵活性样式都可以对单个元素执行。
这是&#39>正在进行的事情:
我有2个我用jQuery影响的Div:
<div id="columnleft">stuff in here</div>
<div id="columncenter">bigger stuff in here</div>
简而言之,左列大约是155px宽,而columncenter相对于columnleft定位,左边距为162px
这是我的风格:
<style>
#columnleft {
float:left;
position:relative;
text-align:left;
width:155px;
}
#columncenter {
position:relative;
padding-bottom:50px
margin:0;
margin-left:162px;
}
</style>
我基本上用下面的jQuery示例切换这两个div:
到目前为止,我已经让这两个独立的实例工作了:
$("#columnleft").hide();
$("#columncenter").css("margin","0px");
然后........
$("#columnleft").show();
$("#columncenter").css("margin-left","162px");
虽然这有效,但我并不十分满意 我更喜欢创建一个或两个类,我可以使用它来切换列左侧的隐藏,同时还可以同时更改margin-left。
上面的例子,当我只使用jQuery时,一切都很好。但是有时会加载页面,并且列左侧是隐藏的,并且columncenter意味着从头开始扩展。很高兴在那些时刻不需要jQuery进入场景。
我能想出的就是:
<style>
.disappear { display:none; }
.maximize { margin:0px; margin-left:0px; }
</style>
页面加载时:
<div id="columnleft" class="disappear">stuff in here</div>
<div id="columncenter" class="maximize">bigger stuff in here</div>
似乎忽略了columncenter。 (columnleft确实消失了) 此外,使用jquery切换,会出现相同的结果。
列中心讨厌我! 有没有人知道我在哪里错过了这个标记?
答案 0 :(得分:1)
查看JSFiddle: http://jsfiddle.net/tuanderful/bTZq8/
如果您有另一个div
同时包含#columnleft
和#columncenter
,并且类别为.hide-left
或.show-left
,该怎么办?
<div class="hide-left">
<div id="columnleft">stuff in here</div>
<div id="columncenter">bigger stuff in here</div>
</div>
然后添加以下CSS:
.show-left #columnleft {
display: block;
}
.show-left #columncenter {
margin-left: 162px;
}
.hide-left #columnleft {
display: none;
}
.hide-left #columncenter {
margin-left: 0;
}
您可以更新您的jQuery,只需在父容器上切换.hide-left
或.show-left
类。
我在这里做的与添加.disappear
和.maximize
样式类似,但我在两列中添加了一些上下文。巧妙的是,所有的样式都是纯粹由CSS处理的 - 当你想显示或隐藏侧边栏时,你只需要JavaScript来更新容器的状态;也就是说,将容器中的类从hide更改为show,反之亦然。
答案 1 :(得分:0)
您需要将!important
放在css样式上。
.maximize {
margin-left: 0px !important;
}
这使得它覆盖了同类的任何其他样式。 Check it out here.
CSS中有一个重要的顺序。 ID #
被认为比类.
更重要(毕竟只能有一个id和多个类)。因此,如果您尝试使用类覆盖id,则需要使用!important
。
答案 2 :(得分:0)
css中的每种类型的选择器加权不同id高于类和高于对象的类
解决问题,使选择器成为
#columncenter.maximize
这将覆盖之前的规则
不要使用!important
,虽然现在可能有用但很难找到为什么以后会覆盖某些内容