当前位置：文江博客话题详情

JQuery 添加/删除链接

发布于 2024-08-20 22:42:41 字数 297 浏览 5 评论 0原文

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

过滤器 1、过滤器 2、过滤器 3、过滤器无

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

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

我将如何使用 JQuery 来做到这一点？我发现命令删除，但我认为这没有帮助，因为当用户单击不同的过滤器时我将无法恢复它。

谢谢

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

风月客 2024-08-27 22:42:41

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

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

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

You should find you answer here 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();
});

回复收藏 0 原文

朕就是辣么酷 2024-08-27 22:42:41

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

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

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

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

    });

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

    });

回复收藏 0 原文

两人的回忆 2024-08-27 22:42:41

为了使其成为最简单、最干净的方法，您可以做的是定义两个 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;
  });
});

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

回复收藏 0 原文

入画浅相思 2024-08-27 22:42:41

将两个元素（一个是锚标记，另一个只是普通文本）放在一个范围内以进行识别。然后在两个/所有过滤器上使用 jQuery toggle() 来循环启用/禁用或显示隐藏锚标记或跨度元素。

回复收藏 0 原文

剩余の解释 2024-08-27 22:42:41

锚点如下：

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

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
}

回复收藏 0 原文

走过海棠暮 2024-08-27 22:42:41

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>

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 原文

七色彩虹 2024-08-27 22:42:41

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

cursor:text

回复收藏 0 原文

甜心 2024-08-27 22:42:41

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

从任何其他包含“活动”类的链接中删除该类；
将“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 上调用 .hide()
在“text”div 上调用 .show()
对于当前活动的 div，反向执行步骤 2 和 3。

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: