ansaurus

Question

Answer 1

A:

Put two elements one an anchor tag and other just normal text inside a span to identify. Then use jQuery toggle() on both/all the filters to cycle the enable/disable or show hide the anchor tag or span elements.

Teja Kantamneni 2010-02-05 16:06:03

Answer 2

A:

You should find you answer here http://stackoverflow.com/questions/586024/disabling-links-with-jquery

Thanks @Will for this elegant solution.

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

Matt 2010-02-05 16:07:56

But how would you then reverse this operation and restore the link when another link is clicked? The goal is to toggle links to and from text, not to convert them one-way.

Seth Petry-Johnson 2010-02-05 16:47:38

Answer 3

A:

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

Answer 4

A:

Here's the anchor:

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

Call the disable function

disableLink('#myLink');

Call the enable function

enableLink('#myLink');

When you want to disable the link, just have onclick return false

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

When you want to enable it

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

gmcalab 2010-02-05 16:08:54

I don't think the point of the question was to prevent the link from being clicked on, it was to show the user which link they are on by turning the link into plain text. (And then reverting that change if another link is clicked and becomes "active")

Seth Petry-Johnson 2010-02-05 16:11:37

@Seth Petry-Johnson, Well, this above does not remove the link but it makes it look like text and also prevents from clicking on it again. So problem is solved with less hassle.

gmcalab 2010-02-05 16:18:06

Agreed, I think your updated answer does a better job of answering the question. I still think it would be cleaner to add/remove a "active-link" CSS class than explicitly set the 'text-decoration' property via JS. I'd rather do my styling in a .css file than by modifying jquery calls :)

Seth Petry-Johnson 2010-02-05 17:16:40

Answer 5

A:

Rather than turn the "active" link into text, a simpler solution would be to use CSS to indicate which link is active. For instance, you could define a style called "active". Each time a link is clicked you would:

Remove the "active" class from any other link that has it;
Add the "active" class to the link that was just clicked

If you really want to convert a link to text, you might create an html structure like this:

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

Then, each time a link is clicked you:

Use the .parent() method to get a reference to the "link-wrapper" div
Call .hide() on the "link" div
Call .show() on the "text" div
Reverse steps 2 and 3 for the one that is currently active.

Seth Petry-Johnson 2010-02-05 16:10:21

Now you have to maintain double the content links

gmcalab 2010-02-05 16:23:03

That's why I recommend the FIRST part of my answer, which is "use CSS to reflect which link is 'active'". But the question explicitly asked about replacing a link with text AND a way to revert it later, and the markup I posted is one way of doing that without losing any information about the link (like their target URL). The other solutions here are great at removing the link and putting in the text, but they don't address how to reverse that operation when the next link is clicked.

Seth Petry-Johnson 2010-02-05 16:48:32

My solution does NOT remove anything. It makes the link NOT clickable and visually makes it look like text. Also, my solution is not making more work for myself whereas yours you'd have to maintain double the content. Example, if a link text changed, you'd have to change it in two spots rather than one.

gmcalab 2010-02-05 17:31:12

Answer 6

+3 A:

What you could do to make this the most easy and clean way possible is to define two css classes, activefilter and inactivefilter, on the first make it look like a link and on the second make it look inactive and your HTML/jQuery would be something like:

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

Ricardo Rodrigues 2010-02-05 16:16:12

this is the only good solution here, except You don't need two classes. ignore the inactivefilter class and it will still work :)

naugtur 2010-02-05 16:46:45

Yeah, you're right :)

Ricardo Rodrigues 2010-02-05 16:54:42

No, because, for what I understood, when you begin, none of the filters is applied, so none is active, all are clickable. About your other question, you could easily add a namespaced click event, that you could bind and unbind to the active and inactive filters, but since it wasn't clear and the main problem seemed to be the links, I didn't produce any code for that, but I can do it

Ricardo Rodrigues 2010-02-05 17:25:03

@Ricardo - I deleted my previous comment. You corrected the class naming on your code. I've no doubt you can do it. You're right, the question wasn't clear. Though as I understand, binding and unbinding require a good amount of overhead. I would tend to test for the presence of the 'activefilter' class that you're adding and removing anyway instead of binding and unbinding. Makes a perfect flag, and is much quicker. Either way would work, though.

patrick dw 2010-02-05 17:56:07

Yes, I just added a namespaces event precisely because I don't know where and when he's going to add the handler to do his thing, and if I included all in the same handler things would be tightly coupled.

Ricardo Rodrigues 2010-02-05 18:32:04

Answer 7

+1 A:

Bind and unbind require a lot of overhead compared to adding a class, for example.

Bind/unbind solutions will work, but are not the best solution.

Here's a better 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;
            });

    });

patrick dw 2010-02-05 16:59:16

ansaurus

tags:

views:

answers:

JQuery Add/ Remove Links

related questions