All geek questions in one place

JQuery Add / Remove Links

I have a list of links that I use to filter results, for example.

filter 1, filter 2, filter 3, filter none

When I click on the filter link, I update the contents of the div using the jQuery load command.

What I want then is that the link to the filter that the user clicked on becomes just a text, not a link (this will stop the user by clicking on the link and also show which filter they are using). If the user then clicks on another filter link, I want the previous link to be restored, and then the link to the filter they clicked on is deleted.

How will I use this jQuery? I found that the command was deleted, but I do not think this will help, because I can not restore it when the user clicks on another filter.

thank

+3
source share
8 answers

Linking and undoing require a lot of overhead compared to adding a class, for example.

Bind / Unbind solutions will work, but this is not the best solution.

Here is the best solution.

.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;
            });

    });
+4
source

You should find the answer here. Disabling links using jQuery

Thanks @WW for this elegant solution.

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

, , css, activefilter 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;
  });
});
+3

, . jQuery toggle() / , span.

0

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>
0

:

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


disableLink('#myLink');


enableLink('#myLink');

, onclick return false

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
}
0

, , , , , , . . , :

:

0

, "" , CSS, , . , , "". , , :

  • "" , ;
  • ""

, ​​ 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(), "link-wrapper" div
  • .hide() "link" div
  • .show() div
  • 2 3 .
-2
source

Source: https://habr.com/ru/post/1731573/

More articles:


All Articles