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

我正在使用这个内容面板切换器，并使用上一篇文章中的代码，我设法让它在单击时显示每个项目为活动的

请看这里：

如何使其在页面加载时显示“主页”为活动状态

---

谢谢。

只需添加此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' });
});

---

首先，我建议您为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' });

});

以下是最新的小提琴：

---

如果有机会，我也会看看其他版本，谢谢你的建议。

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

});