选项卡具有活动类时更改css
我正在尝试更改<body>的背景颜色，这取决于特定于活动的选项卡。
当选项卡处于活动状态时，名为“st_view_active”的类将添加到选项卡内容中。在选项卡内容中，我添加了一个隐藏的div，其中包含十六进制代码，即当该选项卡处于活动状态时，我的身体背景颜色应该是什么，我的jQuery代码如下所示：
$(document).ready(function() {
$(function(){
$('body').css('backgroundColor',$('.st_view_active').find('.background').text());
});
});当标签处于活动状态时，我的html代码如下：
<div class="tab-6 st_view st_view_active" >
<div style="display:none" class="background">yellow</div>
<div class="st_view_inner">
tab 6
</div>
</div>因此，当tab6处于活动状态时，正文的背景应为黄色。但是，这不起作用，背景颜色没有改变，我在这里做错了什么？
DEMO和JSfiddle
谢谢PS:红色和蓝色方块是下一个和上一个制表符处理程序。
回答 4
Stack Overflow用户
发布于 2012-11-20 07:20:56
查看此处：http://jsfiddle.net/CNYDU/25/
我将默认颜色放在sColor的末尾，但是您也可以获取第一个视图并使用它的颜色。我这样做是为了减少测试，因为你的小提琴使用起来很痛苦。
$(document).ready(function() {
var hsh = window.location.hash.replace('#','');
var sColor = hsh ? $("#slidetabs_45").find("."+hsh+" .background").text() : "#3b0";
$("body").css("background-color", sColor);
$("#slidetabs_45").slidetabs({
onContentVisible:function(e){
var color = $("#slidetabs_45").find(".st_view_active .background").text();
$("body").css("background-color", color);
}
});
});我还向第一个视图添加了.st_view_active类，以便它可以正确启动。
我还添加了背景颜色的CSS3过渡，这是不必要的。
Stack Overflow用户
发布于 2012-11-20 06:54:53
这听起来像是在html中使用数据元素的绝佳机会。您可以简单地向选项卡a标记添加一个data-color属性，而不是使用您想要的背景色来隐藏div。然后，当单击div时，您可以使用事件处理程序轻松设置颜色。
链接到更新的fiddle - http://jsfiddle.net/CNYDU/15/
注意:下一个和上一个选项卡在本例中不起作用，但是让它们起作用应该很容易，只需为每个运行的选项卡附加一个监听器
$('body').css('background-color', $(".st_tab_active").attr('data-color'));
作为它的回调。
Stack Overflow用户
发布于 2012-11-20 06:49:43
查看jQuery的livequery插件。
动态查询还能够在匹配新元素时触发函数(回调)，并在元素不再匹配时触发另一个函数(回调)。这提供了终极的灵活性和无数的用例。例如，下面的代码使用基于函数的Live Query来实现jQuery悬停帮助器方法，并在元素不再匹配时移除它。
他们的例子：
$('li')
.livequery(function(){
// use the helper function hover to bind a mouseover and mouseout event
$(this)
.hover(function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
}, function() {
// unbind the mouseover and mouseout events
$(this)
.unbind('mouseover')
.unbind('mouseout');
}); 您应该能够适应css的变化，如触发的事件，并因此根据哪个选项卡处于活动状态来执行您的操作。
我已经派生了Jlange's jsfiddle，它使用了data属性，演示了如何使用这个插件：
- http://jsfiddle.net/nj6ZY/2/
- http://jsfiddle.net/nj6ZY/2/show/#tab-10 -还可以使用链接激活特定的选项卡
以及相关的比特：
$('.st_tabs_ul li a.st_tab_active').livequery(function(){
$('body').css('background-color', $(this).data('color'));
});https://stackoverflow.com/questions/13463460
复制相似问题
腾讯云开发者
