链接在jQuery可点击列中不起作用

时间:2013-12-18 23:08:23

标签: javascript jquery html css

我有可移动的可点击列,但我需要其中的链接才能工作。不幸的是,我并不精通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>

可以挽救此代码吗?我错过了什么?

2 个答案:

答案 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()来电会阻止您的链接响应点击事件。

Here's a fiddle.

修改

要在新标签页中打开您的链接,请将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");