JQuery Add/ Remove Links
I have a list of links which I use to filter results e.g.
filter 1, filter 2, filter 3, filter none
When a filter link is clicked I update the contents of a div using the JQuery load command.
What I then want to happen is that the filter link the user clicked on becomes just text rather than a link (this will stop the user re-clicking on the link and also shows them which filter they are using). 开发者_Python百科If the user then clicks on another filter link I want the previous link to be restored and then link on the filter they clicked on removed.
How would I do this usig JQuery? I found the command remove but I don't think this would help as I would not be able to restore it when the user clicks on a different filter.
Thanks
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();
});
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;
});
});
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;
});
});
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.
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
}
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>
I know this is a bit late, but one thing I see an issue with using an a tag is that unless you take away the pointer cursor, you will still get the pointer. Even if you remove the binding for clicking. So one thing that should also be done is:
cursor:text
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.
加载中,请稍侯......
精彩评论