JQuery Добавить/удалить ссылки

У меня есть список ссылок, которые я использую для фильтрации результатов, например.JQuery Добавить/удалить ссылки

фильтр 1, фильтр 2, фильтр 3, фильтр ни

Когда канал фильтра нажата ли я обновить содержимое DIV с помощью команды JQuery нагрузки.

То, что я тогда хочу, - это то, что ссылка фильтра, на которую пользователь нажала, становится только текстом, а не ссылкой (это остановит пользователя, щелкнув по ссылке, а также покажет им, какой фильтр они используют). Если пользователь затем нажимает на другую ссылку фильтра, я хочу, чтобы предыдущая ссылка была восстановлена, а затем ссылку на фильтр, который они нажали на удаленный.

Как я буду использовать этот JQuery? Я обнаружил, что команда удалена, но я не думаю, что это поможет, поскольку я не смогу ее восстановить, когда пользователь нажмет на другой фильтр.

Благодаря

источник

2010-02-05 John

Bind и отвязать требуют много накладных расходов по сравнению с добавлением класса, например.

Связывание/развязка решений будет работать, но это не лучшее решение.

Вот лучшее решение.

.disabled { 
      text-decoration:none; 
      color: black; 
     } 
<div> 
    <a href="" class="filterLink">link</a><br /> 
    <a href="" class="filterLink">link</a><br /> 
    <a href="" class="filterLink">link</a><br /> 
</div> 

    $('document').ready(function() { 

      $('.filterLink').click(function() { 
       if($(this).hasClass('disabled')) { 
        return false; 
       } 
       $(this).addClass('disabled'); 
       $(this).siblings().removeClass('disabled'); 
       return false; 
      }); 

    });

источник

2010-02-05 16:59:16 user113716

Положите два НАЧАЛ якорь тег и другие просто обычный текст внутри диапазона, чтобы идентифицировать. Затем используйте jQuery toggle() на обоих/всех фильтрах, чтобы циклически включить/отключить или показать скрыть тег привязки или элементы span.

источник

2010-02-05 16:06:03

Вы должны найти ответ вы здесь Disabling links with JQuery

Спасибо @Will для этого элегантного решения.

jQuery('#path .to .your a').each(function(){ 
    var $t = jQuery(this); 
    $t.after($t.text()); 
    $t.remove(); 
});

источник

2010-02-05 16:07:56 Matt

Но как бы вы тогда переломить эту операцию и восстановить связь, когда другой нажатии на ссылку? Цель состоит в том, чтобы переключать ссылки на текст и из него, а не конвертировать их в одну сторону. –

Я использовал '.html()' вместо '.text()' для сохранения элементов внутри тега ''. – gphilip

Jquery:

$(function(){ 
    $("a:first").bind("click",function(){ 
     $("div").append("<span>Link</span>"); 
     $(this).remove(); 
    }); 
     $("a:last").bind("click",function(){ 
    $(this).prev().find("span").wrap("<a href=#>"); 
    }); 
});

HTML:

<body> 
<div><a href="#">Link</a></div> 
<a href="#">Link2</a> 
</body>

источник

2010-02-05 16:08:38 ozsenegal

Вот якорь:

<a id="myLink" href="myPage.html" onclick="return true" />

Вызвать отключить функцию

disableLink('#myLink');

Вызвать включить функцию

enableLink('#myLink');

Если вы хотите, чтобы отключить ссылку, только что OnClick возвращают ложные

function disableLink(selector){ 
    $(selector).attr('onclick', 'return false'); // disable link 
    $(selector).css('text-decoration', 'none'); // remove underline 
}

Если вы хотите, чтобы включить его

function enableLink(selector){ 
    $(selector).attr('onclick', 'return true'); // enable link 
    $(selector).css('text-decoration', 'underline'); // add underline 
}

источник

2010-02-05 16:08:54 Gabe

Я не думаю, что суть вопроса заключалась в том, чтобы не нажимать ссылку на ссылку, чтобы показать пользователю, на какой ссылке они включены, превратив ссылку в простой текст. (И затем возвращая это изменение, если нажата другая ссылка и станет «активной») –

@Seth Petry-Johnson, Ну, это выше не удаляет ссылку, но делает ее похожей на текст, а также не позволяет щелкнуть по ней снова. Поэтому проблема решена с меньшими проблемами. – Gabe

Согласен, я думаю, что ваш обновленный ответ лучше подходит для ответа на вопрос. Я по-прежнему считаю, что было бы проще добавлять/удалять класс «активной ссылки» CSS, чем явно устанавливать свойство «text-decoration» через JS. Я предпочел бы сделать мой стиль в файле .css, чем путем изменения вызовов jQuery :) –

-2

скорее чем превратить «активную» ссылку в текст, более простым решением было бы использовать CSS, чтобы указать, какая ссылка является ctive. Например, вы можете определить стиль, называемый «активным».При каждом нажатии ссылки вы должны:

Удалите «активный» класс из любой другой имеющейся у него ссылки;
Добавить «активный» класс по ссылке, которая была просто щелкнули

Если вы действительно хотите, чтобы преобразовать ссылку в текст, вы можете создать HTML структуру, как это:

<div class="link-wrapper"> 
    <div class="link"><a href="">...</a></div> 
    <div class="text" style="display: none">Text-version of the link</div> 
</div>

Тогда каждый раз, когда нажата ссылка вам:

Используйте метод .parent(), чтобы получить ссылку на «ссылка-обертку» ДИВ
Вызовите .hide() в строке «link» div
Вызовите .show() в поле «текст» div
Обратные шаги 2 и 3 для текущего активного.

источник

2010-02-05 16:10:21

Теперь вам нужно поддерживать двойные ссылки на контент – Gabe

Вот почему я рекомендую ПЕРВУЮ часть моего ответа, которая «использует CSS для отражения какой ссылки «активно». Но вопрос явно задал вопрос о замене ссылки текстом, а также способ его возврата позже, и разметка, которую я опубликовал, является одним из способов сделать это, не теряя никакой информации о ссылке (например, их целевой URL).Другие решения здесь отлично подходят для удаления ссылки и ввода текста, но они не решают, как отменить эту операцию при нажатии следующей ссылки. –

Мое решение НЕ удаляет ничего. Это делает ссылку НЕ интерактивной и визуально делает ее похожей на текст. Кроме того, мое решение не делает больше работы для меня, в то время как вам придется поддерживать двойной контент. Например, если текст ссылки изменился, вам придется изменить его в двух местах, а не в одном. – Gabe

Что вы могли бы сделать, чтобы сделать это самый простой и чистый способ это возможно, чтобы определить два класса CSS, активный фильтр и inactivefilter, на первый, чтобы она выглядела как ссылка и на второй, чтобы она выглядела неактивным и ваш HTML/JQuery будет что-то вроде:

<a href="#" class="filter">Filter 1</a> 
<a href="#" class="filter">Filter 2</a> 
<a href="#" class="filter">Filter 3</a> 
<a href="#" class="filter">Filter None</a> 

var doStuff = function() { 
    alert('stuff'); 
}; 
$(function() { 
    $('a.filter').bind('click', function() { 
    $('a.filter').removeClass('activefilter').unbind('click.stuff'); 
    $(this).addClass('activefilter').bind('click.stuff',doStuff);     
    return false; 
    }); 
});

источник

2010-02-05 16:16:12

Это единственное хорошее решение здесь, за исключением того, что вам не нужны два класса. проигнорируйте класс inactivefilter, и он все равно будет работать :) – naugtur

Да, вы правы :) –

Нет, потому что, насколько я понял, когда вы начинаете, ни один из фильтров не применяется, поэтому никто не активен, все являются интерактивными. Что касается вашего другого вопроса, вы можете легко добавить событие clickpaced click, которое вы могли бы привязать и отвязать к активным и неактивным фильтрам, но так как это было неясно, и главной проблемой, казалось, были ссылки, я не производил никаких код для этого, но я могу это сделать –

Я знаю, что это немного поздно, но одна вещь, которую я вижу проблему с используя тег является то, что если вы не отнимать курсор-указатель, вы все равно получите указатель. Даже если вы удалите привязку для щелчка. Так одна вещь, которая также должна быть сделана:

курсор: текст

источник

2011-10-28 14:46:54

JQuery Добавить/удалить ссылки

ответ

Смежные вопросы