CODEWITHSUNDEEP
jquery
danyo
danyo

Reputation: 5846

completely removing href links with jquery

I have built a jquery slider for my website. There are 3 slides in total and each slide contains 30-40 images linking through to a separate page.

I would like to completely remove the href links on the slides that are not active, and then add them in again when the slide is active. I have tried a few methods such as:

$('a').click(function(e){
e.preventDefault();
});

But this only prevents the link clicking through and doesn't actually remove it.

Any suggestions on what i could do?

The reason i would like to do this is because Google doesn't like more than 100 internal links on a page and i have nearly double that!

Thanks, Dan

Upvotes: 1

Views: 7850

Answers (4)

Lamin Sanneh
Lamin Sanneh

Reputation: 310

If you cant for some reason, try this on the currently active image 

$("active image identifier selector a").attr("href", "link to add");
$("all images selector").not("active image identifier selector").find("a").removeAttr("href")

Mind you using removeAttr does not disable the link, it removes it totally, not sure if thats what you want to do. Just to confirm, do you want the links deactivated or removed at all.

e.preventDefault only disables the link but not remove it.

Say you have the 2nd image active and you do something like $("images a").attr("href", "link to add"), how would you know what link to add to that image and preceeding images when they become active because you have pretty much discarded the href attribute.

A solution I will suggest is to store the link in a data attribute for a link like

//store href in link data for each link to be deactivated
$("all images selector").not("active image identifier selector").each(function(){

    var $this = $(this);

    //get url of link
    var url = $this.attr("href");

    //store url in a data attribute for that link
    $this.data("my-url", url);

    $(this).removeAttr("href");
});

//get data attribute of active image and readd href attribute
$("active image identifier selector a").attr("href", $("active image identifier selector a").data("my-url"));

Try this and let me know if that helps. Mind you its not the most effiecient way of doing it. There may be more optimized functions to loop over the links but getting it to work is priority first here I assume for you.

Cheers.

Upvotes: 1

David Fregoli
David Fregoli

Reputation: 3407

please be aware that google will scrape the original code and won't pay attention to the one resulting in js manipulations.

you can start without href in the dom and have something like

<a data-href="url">

when the event for image sliding in fires you can activate it with:

$(this).attr('href', $(this).data('href'))

or you could actually activate them all at once on dom ready

$('#carousel a').each(function() {
    $(this).attr('href', $(this).data('href'));
});

Upvotes: 4

Jamir Khan
Jamir Khan

Reputation: 397

Using javascript:void(0) in href user will not go to next page and no more url is used in page.

Try this code:

$('a').click(function(e){
    $(this).attr("href","javascript:void(0)");
})

Upvotes: 0

Jean-Georges
Jean-Georges

Reputation: 688

I don't get your code, why do you listen to the click event ? If you wan't to deactivate them, you can put $("a").css("display","none"); then set it back later. If you wan't to completly remove the html, it's $("a").remove();

Anyway, this won't help you. Google's indexer don't have javascript enabled, you have to change your raw html.

Upvotes: 1

Related Questions