Question

我正在使用https://code.google.com/p/jquery-content-panel-switcher/中的这个内容面板切换器，并使用上一篇文章中的代码，我设法让它在点击时将每个项目显示为活动状态。

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

我怎样才能让它显示出来＆＃39; home＆＃39;在页面加载时是否有效？

感谢。

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

的 RESULT

Answer 2

首先，我建议你为jQuery获得另一个tab切换插件。有很多。这个似乎痛苦地过时了。它没有任何事件，也没有附加任何可用于识别（和样式）活动内容的类名。

话虽如此，您可以将相同的样式应用于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/

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

2 个答案: