我有一个jquery幻灯片,它使用导航列表来切换幻灯片图像.它的工作原理是当您将鼠标悬停在导航列表上时,它会突出显示(‘.active’)并且关联的图像会切换到该列表.导航列表中有链接,也可以单击该链接转到其他页面.
我需要这个在平板电脑上工作,这样当人们点击导航列表时,它会变为活动状态,然后图像幻灯片切换,然后如果再次点击它会跟随到该链接.现在发生的事情是,只要点击它,它就会变为活动状态并点击进入.
这是jquery
$(".main_image .desc").show(); //Show Banner
$(".main_image .block").animate({ opacity: 0.8 },1 ); //Set Opacity
//Click and Hover events for thumbnail list
$(".image_thumb ul li:first").addClass('active');
$(".image_thumb ul li").hover(function(e){
//Set Variables
e.preventDefault();
var imgAlt = $(this).find('img').attr("alt"); //Get Alt Tag of Image
var imgTitle = $(this).find('a.imgloc').attr("href"); //Get Main Image URL
var imgDesc = $(this).find('.block').html(); //Get HTML of block
var imgDescHeight = $(".main_image").find('.block').height(); //Calculate height of block
if ($(this).is(".active")) { //If it's already active,then...
return false; // Don't click through
} else {
//Animate the Teaser
$(".main_image .block").animate({ opacity: 0,marginBottom: -imgDescHeight },250,function() {
$(".main_image .block").html(imgDesc).animate({ opacity: 0.8,marginBottom: "0" },250 );
$(".main_image img").attr({ src: imgTitle,alt: imgAlt});
});
}
$(".image_thumb ul li").removeClass('active'); //Remove class of 'active' on all lists
$(this).addClass('active'); //add class of 'active' on this list only
return false;
});
这是导航列表的html
<div class="image_thumb">
<ul>
<li id="one">
<h2><a href="styleguide.html">Text Text Text</a></h2>
<p><a href="styleguide.html">Text Text Text</a></p>
<a class="imgloc" href="content/images/home/01.jpg"></a>
<div class="block">
<p>Text Text Text</p>
</div>
</li>
</ul>
</div>
以下是它的工作原理示例：ocgoodwill.org
如果有人能提供帮助那就太棒了！
– 编辑 –
我还想补充一点,如果用户点击其中一个元素,然后点击另一个元素,则需要重置第一个元素,这样如果他们重新点击它,它就不会自动点击.
解决方法
更新：在最近再次使用这个脚本后,我意识到事情可以做得更简单,根本不需要任何标志.
See revised code on my website.
原始答案：
今天有同样的问题.我使用数据属性解决了它,活动绑定到touchstart事件(这是一个基本的触摸设备检查,但你可以使这更彻底).尝试使用以下代码,替换’clickable_element’以满足您的需求.
$('clickable_element').live("touchstart",function(e){
if ($(this).data('clicked_once')) {
// element has been tapped (hovered),reset 'clicked_once' data flag and return true
$(this).data('clicked_once',false);
return true;
} else {
// element has not been tapped (hovered) yet,set 'clicked_once' data flag to true
e.preventDefault();
$(this).trigger("mouseenter"); //optional: trigger the hover state,as preventDefault(); breaks this.
$(this).data('clicked_once',true);
}
});
这应该会阻止平板电脑在第一次点击时激活链接,在第二次点击时激活它.
编辑：如果有多个链接元素,当单击其中一个元素时需要“重置”,请尝试将数据属性附加到父容器：
HTML：
<div id="parent-element">
<a href="" id="1">Link 1</a>
<a href="" id="2">Link 2</a>
<a href="" id="3">Link 3</a>
</div>
jQuery的：
$('#parent-element a').live("touchstart",function(e){
var $link_id = $(this).attr('id');
if ($(this).parent().data('clicked') == $link_id) {
// element has been tapped (hovered),reset 'clicked' data flag on parent element and return true (activates link)
$(this).parent().data('clicked',null);
return true;
} else {
// element has not been tapped (hovered) yet,set 'clicked' data flag on parent element to id of clicked link,and prevent click
e.preventDefault(); // return false; on the end of this else statement would do the same
$(this).trigger("mouseenter"); //optional: trigger the hover state,as preventDefault(); breaks this. I do suggest adding a class with addClass,as this is much more reliable.
$(this).parent().data('clicked',$link_id);
}
});
