jQuery - 点击标签时更改图片
问题描述:
我试图根据点击哪个标签来获取WordPress图片进行更改。jQuery - 点击标签时更改图片
在下面的链接中,我希望使用jQuery淡入淡出效果将图像替换为新图像。该图像必须相对于该选项卡。
实施例...
如果标签 “MY1” 被点击时,然后用my1.jpg 替换当前影像如果标签 “MY2” 被点击时,然后用my2.jpg替换当前图像
http://www.gatehouse.the-digital-effect.com/tabs/
任何帮助,大加赞赏:O)
答
试试这个: $('.ui-tabs').click(function(e) { e.stopPropagation(); });
答
它看起来像使用jQuery UI标签组件。切换选项卡时,它会自定义“tabsselect”事件。你可以挖掘它像这样:
jQuery('#wp-tabs-1').bind('tabsselect', function(event, ui) {
var $img = jQuery('li.imageslide img');
$img.fadeOut('slow', function() {
$img.attr('src', 'my' + ui.index + '.jpg');
$img.fadeIn('slow');
});
});
的点击选项卡的索引将被存储为传递到回调的UI参数对象的属性。你可以通过连接'my'来建立文件名。
我不确定您想要切换哪张图片,我认为它是页面上的主要大图片。如果没有,请将“li.imageslide img”选择器切换为以图像元素为目标的选择器。
答
以下是使用jQuery UI选项卡执行所需操作的方法。它使用“show”事件来检测显示哪个ui.panel元素。
$('#tabs').tabs({
show: function(e,ui){
switch(ui.panel){
case $('#tabs-1')[0]: src = 'image1.jpg'; break;
case $('#tabs-2')[0]: src = 'image2.jpg'; break;
default: src = 'default.jpg';
}
$('#myimg').attr('src',src);
}
});
未来,我会建议在您的问题中添加更多细节,并提供更简化的示例。你的页面上有很多脚本,这使你很难看清你的具体情况。
啊,对不起,我想说的不好,我正在尝试做什么。我想交换主图像“../careers-sm-930x370.jpg”为“../Wind_turbines_by_serdarguler-930x370.jpg” – Smurphonomics 2012-04-03 04:16:50
或者,或者我应该优先说。我希望它能带您到幻灯片中的某个幻灯片。这可能会更容易一些。我猜我会使用滑块散列标签上的点击功能?我现在已经将多张图片上传到幻灯片,所以您可以看到该选项的外观。 – Smurphonomics 2012-04-03 04:22:58