tags:

views:

301

answers:

7

Is it possible to make a link that does nothing. I want the item to be a link so I get the cursor to change on mouseover, but I don't want the link to actually go anywhere as it actually triggers the showing of a div with extra functionality on the same page.

+12  A: 

Will add to the browser history:

<a href="#"></a>

Won't add to the browser history (preferred method):

<a href="javascript:;"></a>

pygorex1
+1  A: 

One option would be to point to #someid - it'll move it vertical scroll to that element, but that may or not be what you want.

Ps. you can achieve the same result with styles.

eglasius
+11  A: 

Instead, you could use a <span> and set the cursor style:

<span id="node42" class="node-link">My Text</span>

And specify the cursor in your stylesheet:

.node-link { cursor: pointer; }

This would also allow you to attach to the node for your actions later (show here using Prototype):

<script type="text/javascript">
    $('node42').observe('click', function(event) {
      alert('my click handler');
    });
</script>
jheddings
Why id instead of class?
Roger Pate
@Roger: using `id` allows the element to be uniquely identified, mostly useful for the javascript example in this case. You have a good point for the cursor. It is probably more of a class-based style. I've updated my answer. Thanks!
jheddings
+1  A: 

If you just want style, set the the CSS cursor property to pointer.

But it sounds like you want <a href="javascript:void(do_something())">.

Roger Pate
+3  A: 

Just add the style cursor:pointer to the element:

<a id="clickme">Click Me</a>

CSS:

#clickme { cursor: pointer }

Or (heaven forbid) in-line:

<a style="cursor:pointer">Click Me</a>
Doug Neiner
You must have to use href="#". <a id="clickme">Click Me</a>will create problem.
Umesh Aawte
@Umesh, what problem? The only "problem" is that hover styles won't work in IE6 and the `cursor: pointer` won't automatically be applied. Please explain.
Doug Neiner
+1  A: 

in my opinion, the most complete hack free solution:

<a href="" onclick="return false;">do absolutely nothing</a>
pstanton
+1  A: 

try this "< a href="javascript:;"> "

Summy