Question

我有一个非常简单的页面，它使用jQuery来隐藏和显示内容。我有3个链接，3个与这3个链接相关的div。单击div显示的其中一个链接时。 jQuery脚本还在链接中添加.active类，以便显示当前活动的链接。

我的问题是我需要有3个不同的.active类，每个链接一个，所以当它们处于活动状态时，它们都可以有不同的背景图像。以下是运行它的jQuery代码：

<script type='text/javascript'>//<![CDATA[

  $(window).load(function(){

    $('.link').click(function(e) {
      e.preventDefault();

      // Remove any active classes:
      $('.active').removeClass('active');
      $(this).addClass('active');

      // Hide all the content:
      $('.content').fadeOut();
      $('.logo').fadeOut(); 

      // Show the requested content:
      var content = $(this).attr('rel');
      $('#' + content).fadeIn();
    });

  });//]]>

</script>

我无法弄清楚如何创建一个jsfiddle，所以我在这里有一个指向dev页面的链接：http://agoberg.tv/kiosk/index.html

Answer 1

我明白了。我在css中添加了3个类，每个链接一个。然后我将jQuery调整为：

<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
// Catch all clicks on a link with the class 'link'
$('.link').click(function(e) {
// Stop the link being followed:
e.preventDefault();
// Get the div to be shown:
var content = $(this).attr('rel');
// Remove any active classes:
$('.activediv1').removeClass('activediv1');
$('.activediv2').removeClass('activediv2');
$('.activediv3').removeClass('activediv3');
// Add the 'active' class to this link:
$(this).addClass('active' + content);

// Hide all the content:
$('.content').fadeOut();
$('.logo').fadeOut(); 

// Show the requested content:
$('#' + content).fadeIn();

});
});//]]> 
</script>

使用jQuery导航的多个.active类

1 个答案: