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

Question

I'm trying to change the background colour of the <body> depending on what tab specific is active. 我试图根据特定的选项卡处于活动状态来更改<body>的背景颜色。

When a tab is active, a class called 'st_view_active' is added onto the tab content. 当选项卡处于活动状态时，称为“ st_view_active”的类将添加到选项卡内容中。 In the tab content I add a hidden div with the hex code of what my body background colour should be when that tab is active, my jQuery code looks like this: 在选项卡内容中，我添加了一个隐藏的div，其中包含十六进制代码，表示该选项卡处于活动状态时我的身体背景颜色应为什么，我的jQuery代码如下：

$(document).ready(function() {
    $(function(){
         $('body').css('backgroundColor',$('.st_view_active').find('.background').text());
     });
 });

And my html code when the tab is active is following: 标签页处于活动状态时，我的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>

So when tab6 is active the background of the body should be yellow. 因此，当tab6处于活动状态时，主体的背景应为黄色。 However, this is not working, the background colour is not changing, what am I doing wrong here? 但是，这不起作用，背景颜色没有改变，我在这里做错了什么？

DEMO and JSfiddle 演示和JSfiddle

Thanks PS: The red and blue square is the next and previous tab handler.. 谢谢PS：红色和蓝色方块是下一个和上一个选项卡处理程序。

Answer 1

See here: http://jsfiddle.net/CNYDU/25/ 看到这里： http : //jsfiddle.net/CNYDU/25/

I put the default color at the end of sColor , but you could instead grab the first view and use its color. 我将默认颜色放在sColor的末尾，但是您可以改为获取第一个视图并使用其颜色。 I did it this way to cut down on testing since your fiddle is painful to work with. 我这样做是为了减少测试，因为您的小提琴很痛苦。

$(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);
        }
    });       
});

I also added the .st_view_active class to the first view so that it will start correctly. 我还向第一个视图添加了.st_view_active类，以便它将正确启动。

I also added a CSS3 transition to the background color, which isn't necessary. 我还向背景颜色添加了CSS3过渡，这不是必需的。

Answer 2

This sounds like a great opportunity to use data elements in html. 这听起来像一个伟大的机会，在HTML中使用的数据元素。 Rather than having a hidden div with the background color you want, you can simple add a data-color attribute to your tab a tag. 您可以a标签将data-color属性简单地添加到选项卡中，而不是使用具有所需背景颜色的隐藏div。 Then when the div is clicked you can set the color easily with an event handler. 然后，当单击div时，可以使用事件处理程序轻松设置颜色。

link to an updated fiddle - http://jsfiddle.net/CNYDU/15/ 链接到更新的小提琴-http: //jsfiddle.net/CNYDU/15/

Note: The next and previous tabs do not work in this example, but it should be easy to get them working, just attach a listener to each that runs 注：下一个和以前的选项卡并不在这个例子中工作，但它应该很容易让他们的工作，只是附加一个侦听每个运行

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

as its callback. 作为其回调。

Answer 3

Check out the livequery plugin for jQuery. 查看jQuery的livequery插件。

Live Query also has the ability to fire a function (callback) when it matches a new element and another function (callback) for when an element is no longer matched . Live Query还具有在与新元素匹配时触发一个函数（回调）的功能，以及在一个元素不再匹配时触发另一个函数（回调）的功能 。 This provides ultimate flexibility and untold use-cases. 这提供了最大的灵活性和难以置信的用例。 For example the following code uses a function based Live Query to implement the jQuery hover helper method and remove it when the element is no longer matched. 例如，以下代码使用基于函数的实时查询来实现jQuery悬停帮助器方法，并在元素不再匹配时将其删除。

Their example: 他们的例子：

$('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'); 
});

You should be able to adapt this to your css changes like fired events, and therefor perform your actions based on which tab is active. 您应该能够使其适应css更改（例如触发事件），并因此基于活动的选项卡执行操作。

I have forked Jlange's jsfiddle , which uses the data attribute, for a demo of how this plugin would be used: 我已经分叉了Jlange的 jsfiddle ，它使用了data属性，以演示如何使用此插件：

http://jsfiddle.net/nj6ZY/2/ http://jsfiddle.net/nj6ZY/2/
http://jsfiddle.net/nj6ZY/2/show/#tab-10 - Also works with a link to activate a specific tab http://jsfiddle.net/nj6ZY/2/show/#tab-10-也可用于激活特定标签的链接

And the relevant bits: 和相关的位：

$('.st_tabs_ul li a.st_tab_active').livequery(function(){ 
    $('body').css('background-color', $(this).data('color'));
});

Answer 4

Put ID's on your tabs. 将ID放在您的标签上。 Example for id="tab6": id =“ tab6”的示例：

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

However, why would you attach this function to document ready only? 但是，为什么要将此功能附加到仅准备就绪的文档上？ I would bind the function to when the element is clicked... 我将功能绑定到单击元素时...

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

问题描述

4 个解决方案

解决方案1
2 已采纳 2012-11-19 23:20:55

解决方案2
0 2012-11-19 22:54:52

解决方案3
-1 2012-11-19 22:49:43

解决方案4
-2 2012-11-19 22:36:38

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

问题描述

4 个解决方案

解决方案1 2 已采纳 2012-11-19 23:20:55

解决方案2 0 2012-11-19 22:54:52

解决方案3 -1 2012-11-19 22:49:43

解决方案4 -2 2012-11-19 22:36:38

解决方案1
2 已采纳 2012-11-19 23:20:55

解决方案2
0 2012-11-19 22:54:52

解决方案3
-1 2012-11-19 22:49:43

解决方案4
-2 2012-11-19 22:36:38