Question

我正在尝试更改<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：红色和蓝色方块是下一个和上一个标签处理程序..

Answer 1

见这里：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过渡到背景颜色，这是不必要的。

Answer 2

这听起来像是在html中使用数据元素的绝佳机会。您可以在标签data-color标记中添加a属性，而不是使用您想要的背景颜色隐藏div。然后，当单击div时，您可以使用事件处理程序轻松设置颜色。

链接到更新的小提琴 - http://jsfiddle.net/CNYDU/15/

注意：下一个和上一个选项卡在此示例中不起作用，但它应该很容易让它们工作，只需将一个监听器附加到每个运行

$('body').css('background-color', $(".st_tab_active").attr('data-color'));

作为回调。

Answer 3

查看jQuery的livequery插件。

Live Query还能够在匹配新元素时触发函数（回调），并且在元素不再匹配时启用另一个函数（回调） 。这提供了极大的灵活性和无数的用例。例如，以下代码使用基于函数的Live Query来实现jQuery hover helper方法，并在元素不再匹配时将其删除。

他们的例子：

$('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，以演示如何使用此插件：

http://jsfiddle.net/nj6ZY/2/
http://jsfiddle.net/nj6ZY/2/show/#tab-10 - 也可以使用链接激活特定标签

选项卡具有活动类时更改css

4 个答案: