我有一个链接列表，用于过滤结果，例如
过滤器 1、过滤器 2、过滤器 3、过滤器无
单击过滤器链接时，我使用 JQuery 加载命令更新 div 的内容。
然后我想要发生的是用户单击的过滤器链接只是文本而不是链接（这将阻止用户重新单击该链接，并显示他们正在使用的过滤器）。如果用户然后单击另一个过滤器链接，我希望恢复以前的链接，然后将他们单击的过滤器上的链接删除。
我将如何使用 JQuery 执行此操作？我找到了删除命令，但我认为这不会有帮助，因为当用户点击不同的过滤器时我将无法恢复它。
谢谢
【问题讨论】：
标签： jquery
你应该在这里找到答案Disabling links with JQuery
感谢@Will 提供这个优雅的解决方案。
jQuery('#path .to .your a').each(function(){
var $t = jQuery(this);
$t.after($t.text());
$t.remove();
});
【讨论】：
.html() 而不是.text() 来保留<a> 标签内的元素。
例如，与添加类相比，绑定和取消绑定需要大量开销。
绑定/取消绑定解决方案可行，但不是最佳解决方案。
这里有一个更好的解决方案。
.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;
});
});
【讨论】：
你可以做的最简单和最干净的方法是定义两个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;
});
});
【讨论】：
将两个元素一个是锚标记，另一个只是普通文本在 span 内进行标识。然后在两个/所有过滤器上使用 jQuery toggle() 循环启用/禁用或显示隐藏锚标记或跨度元素。
【讨论】：
这是锚点：
<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
}
【讨论】：
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>
【讨论】：
我知道这有点晚了，但我发现使用 a 标签的一个问题是，除非你拿走指针光标，否则你仍然会得到指针。即使您删除了单击的绑定。所以还应该做的一件事是：
光标：文本
【讨论】：
与其将“活动”链接转换为文本，更简单的解决方案是使用 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>
然后，每次点击链接时你：
【讨论】：