我有可移动的可点击列,但我需要其中的链接才能工作。不幸的是,我并不精通jQuery。问题必须是触发器(?),但我没有看到解决方法。如果有人回答,我也很抱歉,因为我不知道在搜索时是否使用了正确的术语。
这是我可以找到我的(一半)工作代码的地方: http://jsfiddle.net/28XNH/5/
脚本:
$(".image-container").click(function(e){
e.preventDefault();
$(this).parent(".infoCol").addClass("currentCol").siblings().removeClass("currentCol");
});
$(".posts").trigger("click");
$(".head").click(function(e){
e.preventDefault();
$(this).parent(".infoCol").addClass("currentCol").siblings().removeClass("currentCol");
});
$(".posts").trigger("click");
$(".inner-container").click(function(e){
e.preventDefault();
$(this).parent(".infoCol").addClass("currentCol").siblings().removeClass("currentCol");
});
$(".posts").trigger("click");
HTML:
<div id="profilemore">
<div id="page-wrap">
<div class="infoCol">
<a class="tigers head" href=""><span style="font-size:12pt; font-weight:bold;">Tigers</span></a>
<div class="image-container" style="height:100%;">
<div class="inner-container" style="height:100%;">
<div>
Here is a little about tigers. For more information, please visit <a href="http://worldwildlife.org/species/tiger">The WWF</a>
</div>
</div>
</div>
</div>
<div class="infoCol">
<a class="giantpandas head" href=""><span style="font-size:12pt; font-weight:bold;">Giant Pandas</span></a>
<div class="image-container" style="height:100%;">
<div class="inner-container" style="height:100%;">
<div>
Here is a little about giant pandas. For more information, please visit <a href="http://worldwildlife.org/species/giant-panda">The WWF</a>
</div>
</div>
</div>
</div>
<div class="infoCol">
<a class="polarbears head" href=""><span style="font-size:12pt; font-weight:bold;">Polar Bears</span></a>
<div class="image-container" style="height:100%;">
<div class="inner-container" style="height:100%;">
<div>
Here is a little about polar bears. For more information, please visit <a href="http://worldwildlife.org/species/polar-bear">The WWF</a>
</div>
</div>
</div>
</div>
</div>
</div>
可以挽救此代码吗?我错过了什么?
答案 0 :(得分:3)
尝试将脚本更改为:
$(".image-container").click(function(){
$(this).parent(".infoCol").addClass("currentCol").siblings().removeClass("currentCol");
});
$(".posts").trigger("click");
$(".head").click(function(){
$(this).parent(".infoCol").addClass("currentCol").siblings().removeClass("currentCol");
});
$(".posts").trigger("click");
$(".inner-container").click(function(){
$(this).parent(".infoCol").addClass("currentCol").siblings().removeClass("currentCol");
});
$(".posts").trigger("click");
我不是专家,但我相信e.preventDefault()
来电会阻止您的链接响应点击事件。
修改强>
要在新标签页中打开您的链接,请将target
属性添加到其标记中。
他们看起来像这样:
<a href="#" target="_blank">This is your link.</a>
编辑2:
另一方面,您的HTML在语法上不正确。这是相同的HTML,整理了:
<div id="profilemore">
<div id="page-wrap">
<div class="infoCol">
<a class="tigers head" href=""><span style="font-size:12pt; font-weight:bold;">Tigers</span></a>
<div class="image-container" style="height:100%;"></div>
<div class="inner-container" style="height:100%;">Here is a little about tigers. For more information, please visit <a href="http://worldwildlife.org/species/tiger">The WWF</a>
</div>
</div>
</div>
<div class="infoCol">
<a class="giantpandas head" href=""><span style="font-size:12pt; font-weight:bold;">Giant Pandas</span></a>
<div class="image-container" style="height:100%;">
<div class="inner-container" style="height:100%;">Here is a little about giant pandas. For more information, please visit <a href="http://worldwildlife.org/species/giant-panda">The WWF</a>
</div>
</div>
</div>
<div class="infoCol">
<a class="polarbears head" href=""><span style="font-size:12pt; font-weight:bold;">Polar Bears</span></a>
<div class="image-container" style="height:100%;">
<div class="inner-container" style="height:100%;">Here is a little about polar bears. For more information, please visit <a href="http://worldwildlife.org/species/polar-bear">The WWF</a>
</div>
</div>
</div>
</div>
答案 1 :(得分:0)
在.image-container的处理程序中调用preventDefault会阻止链接工作。幸运的是,似乎没必要。
此外,您不需要为.image-container和.inner-container单独处理程序,因为它们执行相同的操作,而.inner-container点击将冒泡到它们的图像容器。
最后,您可能希望在图像容器中的链接上停止传播,以便JS在重定向之前不会执行任何操作。
$(".image-container").click(function(e){
$(this).parent(".infoCol").addClass("currentCol").siblings().removeClass("currentCol");
});
$(".head").click(function(e){
e.preventDefault();
$(this).parent(".infoCol").addClass("currentCol").siblings().removeClass("currentCol");
});
$('.image-container').on('click', 'a', function(e) {
e.stopPropagaion();
}
$(".posts").trigger("click");