0

嗨，我在我的网站中使用任何滑块，我想在其中向控件添加点击事件。这可能吗？当我尝试这样做时，我的事件没有触发。有人知道这一点吗？

我的点击事件详情

 $(function(){
$('.thumbNav li a').click(function () {
$(".spec li a").css('color','#fff');
    });
});

小提琴链接 jsfiddle.net/Mottie/ycUB6/5340

4

2 回答 2

1

你检查过 JS 控制台是否有错误？您错过了$事件处理程序中的 before 选择器。

以防万一，您可以考虑使用live方法来绑定事件。

编辑：

在您的小提琴中，没有带有“spec”类的元素 - 链接Tab#在带有 class 的 div 中spec-nav。以下代码可以正常工作：

$('.thumbNav li a').click(function () {
    $(".spec-nav li a").css('color','#f0f');
});

检查更新的小提琴。

于 2013-04-15T10:22:42.133 回答
1

您编码不起作用的原因是导航控件在 AnySlider 初始化之前不存在。所以，你真的有两个选择：

1）在onInitialized回调函数（演示）中使用您的函数：

var tabContainers = $('div.spec-nav > div');
tabContainers.hide().filter(':first').show();

$(function () {
    $('#slider1, #slider2, #slider3').anythingSlider({
        theme: 'metallic',
        easing: 'easeInOutBack',
        navigationFormatter: function (index, panel) {
            return ['Slab', 'Parking Lot', 'Drive', 'Glorius Dawn', 'Bjork?', 'Traffic Circle'][index - 1];
        },

        // Callback when the plugin finished initializing
        onInitialized: function (e, slider) {
            $('div.spec-nav ul li a').click(function () {
                tabContainers.hide();
                tabContainers.filter(this.hash).show();
                $('div.spec-nav ul li a').removeClass('spec-actv');
                $(this).addClass('spec-actv');
                return false;
            }).filter(':first').click();
        },

        onSlideComplete: function (slider) {
            // alert('Welcome to Slide #' + slider.currentPage);
        }
    });

});

2）在创建导航选项卡时构建此功能......如果您查看navigationFormatter文档，您会看到您可以返回选项卡的任何属性；这使用了创建 DOM 元素的jQuery()方法。

$('#slider').anythingSlider({
  navigationFormatter : function(i, panel){
    return {
      'class'    : 'imatab',
      'data-hdr' : 'Header: ' + panel.find('h2').text(), // save text from the h2 in the panel
      'title'    : 'This text will end up in a tooltip',
      'html'     : '<a class="panel' + i + '" href="#"><span>' + ['Cat', 'Dog', 'Bear', 'Wolf', 'Horse', 'Bjork?'][index - 1] + '</span></a>',
      'click'    : function(){ alert("AHHH I've been clicked"); }
    };
  }
});

如果你使用的是 jQuery 1.8+，你可以像这样传递任何 jQuery 实例方法：

$('#slider').anythingSlider({
  navigationFormatter : function(i, panel){
    return {
      class : 'imatab',
      on    : {
          click : function( event ) {
              // do something
          }
      },
      html  : '<a class="panel' + i + '" href="#"><span>' + i + '</span></a>'
    }
  }
});

我没有为这个方法做一个演示，但我希望你能明白。

于 2013-04-16T13:35:42.867 回答