2013-08-28 2 views
-1

У меня есть якорный тег, внутри которого я добавляю некоторые divs через jQuery. Я хочу, чтобы эффект «гиперссылки» родительского тега <a> не появлялся в присоединенных дочерних элементах.Удалить поведение гиперссылки из дочерних элементов

Как мы можем достичь этого с помощью jQuery или каким-либо другим способом.

Вот fiddle того, что я хочу.

UPDATE: В большинстве ответов рассказывается, как удалить эффект щелчка. Не существует ли чего-то, что может предотвратить любое поведение по умолчанию для привязывающего тега из дочерних элементов?

+2

Что вы имеете в виду под "гиперссылок эффект"? Подчеркнуто? Функциональность «нажмите, чтобы перейти»? –

+1

Можете ли вы опубликовать код, на который вы ссылаетесь, или скрипку? –

+0

Я предполагаю, что он означает обращение к новому URL-адресу. Можете ли вы разместить свой код Arvind? – BenM

ответ

3

FIDDLE

Ok. Вот некоторые примеры HTML

<a href="google.com" id="first"> 
    <div> 
     <p>Blah</p> 
    </div> 
    <div> 
     <p>Blah</p> 
    </div> 
    <div> 
     <p>Blah</p> 
    </div> 
</a> 

<a href="google.com" id="second"> 
    <div> 
     <p>Blah 2</p> 
    </div> 
    <div> 
     <p>Blah 2</p> 
    </div> 
    <div> 
     <p>Blah 2</p> 
    </div> 
</a> 

Этот CSS будет удалить подчеркивание, изменить цвет шрифта и курсор

div{ 
    display: inline; 
} 

#second{ 
    text-decoration: none; 
    color: #000; 
    cursor: default; 
} 

JQuery удаляет событие щелчка от детей

$('#second').children().each(function(){ 
    $(this).click(function(e){ 
     e.preventDefault(); 
    }); 
}); 

Обновление: В дополнение к вашим комментариям то, что вы пытаетесь сделать, сложно и странно. Вы почему-то говорите, что должны обернуть divs тегом асора, но не наследовать их. Вам нужно будет сделать компромисс. Фокус в удалите 'href' из тега. Вам не нужно было писать jQuery/javascript для этого. На самом деле вам даже не нужен CSS. По сути, удалите все css и jquery из вышеописанного и удалите href со второго a.

FIDDLE

+0

Это близко к тому, что я хочу. Но я не могу выбрать детей, как обычный текст. У них все еще есть поведение тега привязки. –

+0

Вы не сможете выбрать такой текст. Вы можете написать функцию jquery, но она не будет вести себя так же, как при обычном выборе текста. Что именно вы пытаетесь достичь? Я уверен, что есть лучший способ сделать все это. –

+0

Я просто хочу, чтобы добавленные элементы в теге привязки не должны были вести себя как тег привязки. –

0

Вы можете использовать: селектор первого ребенка. Посмотрите на http://api.jquery.com/first-child-selector/

+0

Какая польза от этого? Пожалуйста, верните свой ответ с полным доказательством. –

+0

Он должен получить ваших первых детей div вашего тега. Я ошибаюсь? – Manolo

+0

Мне не нужен первый div. Я хочу всех детей и удалить из них якорь. –

0

Вы можете удалить подчеркивание с помощью CSS:

a div { 
    text-decoration: none 
} 

Чтобы остановить якорь из следующих его href атрибута необходимо связать обработчик события click который возвращает ложь. В JQuery вы можете достичь это следующим образом:

$('a div').on('click', function() { 
    // do whatever you want to do here 

    return false; 
}); 

отредактированные селекторы (добавлено div) после того, как вы предоставили jsfiddle. Тем не менее, есть еще одна вещь. Согласно вашей скрипке, я предполагаю, что вы не хотели, чтобы «что-то» было обернуто div. Он должен выглядеть следующим образом: jsfiddle

0

Вы должны добавить EventListener к вашим якорей и prevent поведение по умолчанию:

document.getElementsByTagName("a")[0].addEventListener("click", function(e){ 
    if(e.target.tagName=="DIV") e.preventDefault(); 
}); 
Смежные вопросы