How do I style a span to look like a link without using javascript?

Question

For my website I will need to use instead of , because I am using mostly ajax and thus instead of links I have onclick ajax event

Answer 1

Use CSS to display the cursor as a pointer:

<span style="cursor: pointer;">Pseudolink</span>

http://jsfiddle.net/kkepg/

Answer 2

Just add cursor:pointer; in your span css.

Answer 3

Note that if your website is public and you are counting on search engines to crawl your site, you lose a lot by leaving out links without href since spiders have nothing to grab on while crawling your page.

You should use a complete link - in case your javascript breaks down the user is still able to navigate through pages:

<a href="http://www.example.com">Link</a>

than you can disable the link with jquery by using preventDefault() - and you totally separated base html and the javascript part, meaning your site is still usable without javascript on.

Than you don't need to bother with span hover and anything - but just for the sake of it

span:hover {
cursor:pointer;
}

will enable hover hand cursor on hovered span.

Answer 4

You can use an onClick event but if I remember correctly, you must return false in order to prevent your page from jumping around; something like:

<a href="#" onClick="myfunction();return false;">

or: <a href="#" onClick="return myfunction();"> provided that myfunction will return false.

You can also directly call a javascript from href but you must cast the result to void in order to block to the browser to try to follow the result as a valid link:

<a href="javascript:void(myFunction())">

Even if you still want to use the onClick property; it would still be a good idea to replace the href="#" with href="javascript:void(0)" ...>.

Other people have mentionned using the event.preventDefault() and stopPropagation(). I don't remember ever using one of these but I must admit that it has been many years since the last time that I have coding some javascript in a HTML link; so you should definitely investigate the use of these two functions.

EDIT: maybe that using a href="javascript:void(0)" could be a bad idea sometimes; see http://drupal.org/node/1193068 .

Answer 5

You can change the cursor to a pointer by specifying the cursor: pointer CSS rule.

You can also use <a> tags instead of <span>, in fact they can behave nicer with screen readers and other similar devices. You don't need to leave out the href attribute if you use the preventDefault() and stopPropagation() JavaScript functions in the onClick handler. This way you can retain some level of backward compatibility with non-JS enabled browsers.

Answer 6

You could use an anchor. But within javascript you'd have to use event.preventDefault() But there is a CSS method thats smaller and easier. Keep your span and use this:

span:hover{
    cursor:pointer;
}