0

我正在尝试<body>根据特定的选项卡处于活动状态来更改背景颜色。

When a tab is active, a class called 'st_view_active' is added onto the tab content. 在选项卡内容中，我添加了一个隐藏的 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

4 回答 4

2

见这里：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 过渡，这不是必需的。

于 2012-11-19T23:20:55.747 回答
0

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

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

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

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

作为它的回调。

于 2012-11-19T22:54:52.673 回答
-1

查看 jQuery 的livequery插件。

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

他们的例子：

$('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 的 jsfiddle，它使用了 data 属性，以演示如何使用这个插件：

以及相关位：

$('.st_tabs_ul li a.st_tab_active').livequery(function(){ 
    $('body').css('background-color', $(this).data('color'));
});
于 2012-11-19T22:49:43.307 回答
-2

把身份证放在你的标签上。id="tab6" 的示例：

$(document).ready(function() {
   if ($('#tab6').attr('class') == 'tab-6 st_view st_view_active') {
      $('body').css('background-color', 'yellow');
   }
});

但是，您为什么要将此功能附加到仅准备好的文档上？我会将函数绑定到单击元素时...

于 2012-11-19T22:36:38.437 回答