a href link that will act like a button

Question

Is there any clean method to make a regular link :

<a href="[8]">Click here to read more...</a>

to act EXACTLY like a button

<button id="[8]">Click here to read more...</button>

Thanks !

Solution

Do you mean something like this?

<a id="[8]" class="readmore" href="#">
    Click here to read more...
</a>

Adapting your javascript to the new "a":

$("a.readmore").click(function() { 
    var id=this.id.split('['); 
    var d_id=id[1].split(']'); 
    var ii=d_id[0] $('html, body').animate({ 
       scrollTop: $('[id='+ii+']').offset().top 
    }, 2000); 

    return false;
});

Just a tip, your string processing looks terrible, suggestion:

$("a.readmore").click(function() { 
    var id=this.id.match('[0-9]+');

    $('html, body').animate({ 
       scrollTop: $('[id='+ id +']').offset().top 
    }, 2000); 

    return false;
});

Ensure this code is being intercept by the page dom parser in the right time, put it inside a

$(document).ready(function(){ ... });

Regards.

Comments

[Mussser]

What do you mean 'act like a button'? What features do you want specifically?

[masteringprojects]

no I want to completely remove the button. I make the button looks like a link via css but this is not a clean method.

[João Pinho]

@masteringprojects can you use just an <a href=""></a> ??

[João Pinho]

@masteringprojects what do you mean by "with act exactly"? If you add on click return false it will not follow the href link. Therefore, it will behave like a button, assuming you added the appropriate CSS styles. Although, why do you need this, is it somekind of hack over an existing system?

[masteringprojects]

no I have a function that split the [{number}] from the <button id="[8]">Click here to read more...</button> and then it's open (slide to) article number 8 and so on...

[masteringprojects]

This is the function : $("button").click(function() { var id=this.id.split('['); var d_id=id[1].split(']') var ii=d_id[0] $('html, body').animate({ scrollTop: $('[id='+ii+']').offset().top }, 2000); });

[kba]

That neither behaves nor looks like a button.

[masteringprojects]

No, This is definetly NOT what I'm looking. I don't need the link to looks like a button I need the link to behave like a button.

[João Pinho]

@masteringprojects switch the button to link then, like it is in my answer you code will work, just change the $("button") to $("a"), maybe consider add a class to "a" so you can write something more precise like $("a.readmore").

[user3152069]

Would you please describe "behave" ? What do you want an onclick event ? You could add an id to the link the and call it trough an external js file, like $("#btn").onclick = function(){ ... }

[masteringprojects]

Yes it is working I have test in on jsfiddle working perfectly ! :) jsfiddle.net/neWuc Thanks to João Pinho!

[masteringprojects]

Thank you VERY MUCH João Pinho ! Sorry that I can't vote up ! :)