Ссылки не работают в кликабельных столбцах jQuery

0

У меня есть кликируемые столбцы, которые движутся, но мне нужны ссылки внутри них для работы. К сожалению, я не владею 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
    e.preventDefault точно так же, как он говорит, он предотвращает ваши действия по умолчанию, то есть щелкать ссылки и затем перенаправляться
Теги:

2 ответа

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>
Поделиться
  • 2
    правильный ответ - возможно, вы захотите изменить цель на «_blank», чтобы вы открыли новую вкладку, возможно, это тоже цель, поскольку у вас есть анимация при нажатии.
  • 0
    @bitoiu Обновил мой ответ.
Показать ещё 8 комментариев
0

Вызов preventDefault в обработчике для.image-контейнера - это прекращение работы ссылок. К счастью, это не кажется необходимым.

Кроме того, вам не нужны отдельные обработчики для контейнера.image-контейнера и.inner-контейнера, потому что они делают то же самое, и клики-контейнеры-контейнеры будут пузыриться до их контейнера-изображения.

Наконец, вы, вероятно, захотите остановитьPropagation на ссылках в контейнере изображений, чтобы 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");
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню