Jquery内容面板切换器显示按钮在加载时为活动状态

Question

我正在使用这个来自https://code.google.com/p/jquery-content-panel-switcher/的内容面板切换器，并使用以前在这里发布的代码，我设法让它在单击时显示每个项目为活动

请看这里:http://jsfiddle.net/n4pPy/1/

$(document).ready(function() {
  jcps.fader(300, '#switcher-panel');
  $('.nav_buttons a').click(function(event){
    $('.nav_buttons a').css({ 'background-color' : '' });
    $(this).css({ 'background-color' : 'red' });
  });
});

我怎么能让它显示'home'作为页面加载活动?

谢谢。

Answer 1

添加Jquery代码

$(document).ready(function() { 
jcps.fader(300, '#switcher-panel');
    $('.nav_buttons a').click(function(event){
      $('.nav_buttons a').css({ 'background-color' : '' });
      $(this).css({ 'background-color' : 'red' });
    });
     //add this css
 $('#home').css({ 'background-color' : 'red' });
});

结果

Answer 2

首先，我建议您为jQuery获得另一个选项卡切换插件。有很多。这个似乎已经过时了。它没有任何事件，也没有附加任何可用于标识(和样式)活动内容的类名。

话虽如此，你可以对init上的第一个元素应用与点击它时相同的样式。

我们将使用.filter(':first')选择器:

$(document).ready(function() {
  jcps.fader(300, '#switcher-panel');
    $('.nav_buttons a').click(function(event){
        $('.nav_buttons a').css({ 'background-color' : '' });
        $(this).css({ 'background-color' : 'red' });
    }).filter(':first').css({ 'background-color' : 'red' });
});

这是更新后的小提琴:

http://jsfiddle.net/n4pPy/24/