Question

我有一个链接列表，用于过滤结果，例如。

过滤器1，过滤器2，过滤器3，过滤器无

单击过滤器链接时，我使用JQuery load命令更新div的内容。

我想要发生的是，用户点击的过滤器链接只是文本而不是链接（这将阻止用户重新点击链接，并向他们显示他们正在使用的过滤器）。如果用户然后点击另一个过滤器链接，我希望恢复上一个链接，然后链接他们点击的过滤器。

我如何使用这个使用JQuery？我发现命令删除但我不认为这会有所帮助，因为当用户点击不同的过滤器时我无法恢复它。

由于

Answer 1

你应该在这里找到答案Disabling links with JQuery

感谢@Will这个优雅的解决方案。

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

Answer 2

例如，与添加类相比，绑定和解除绑定需要大量开销。

绑定/取消绑定解决方案可行，但不是最佳解决方案。

这是一个更好的解决方案。

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

    });

Answer 3

你可以做的最简单和最简单的方法是定义两个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;
  });
});

Answer 4

将两个元素放在一个锚标记中，将其他正常文本放在一个范围内以进行标识。然后在两个/所有过滤器上使用jQuery toggle()来循环启用/禁用或显示隐藏锚标记或span元素。

Answer 5

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>

Answer 6

这是锚：

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

调用禁用功能

disableLink('#myLink');

调用启用功能

enableLink('#myLink');

如果要禁用链接，只需单击onclick返回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
}

Answer 7

我知道这有点晚了，但我发现使用a标签的一个问题是，除非你取走指针光标，否则仍然会得到指针。即使您删除了点击的绑定。所以还应该做的一件事是：

光标：文本

Answer 8

不是将“活动”链接转换为文本，更简单的解决方案是使用CSS来指示哪个链接处于活动状态。例如，您可以定义一个名为“active”的样式。每次点击链接时，您都会：

从包含它的任何其他链接中删除“活动”类;
将“有效”类添加到刚刚点击的链接

如果您确实想要将链接转换为文本，可以创建一个这样的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
在“link”div
在“text”div
针对当前处于活动状态的步骤反向执行步骤2和步骤。

JQuery添加/删除链接

8 个答案: