0

I was used to do href="#" but is there any other way?

Because clicking on such kind of a link sometimes can turn user to front of a page viewed and I want to load some scripts by clicking on a link.

whostolemyhat
  • 3,107
  • 4
  • 34
  • 50
Rootical V.
  • 829
  • 1
  • 11
  • 21
  • @Yaniro I think you should just post it as an answer. – jacqijvv Jun 07 '12 at 08:56
  • There is, certainly, no [tag:css] means of achieving this. I'd suggest that you consider removing that tag, and add the [tag:javascript] tag. I've already edited 'css' to '[tag:html]' – David Thomas Jun 07 '12 at 09:00

7 Answers7

2

Keep using <a href="#">Click</a>, but use some Javascript/jQuery to prevent the page from jumping:

$('a').click(function() {
    // do whatever
    return false;
}

The return false line will prevent the browser from following the link, which in this case will stop it from jumping to the top of the page.

You should keep the link as an <a> tag, rather than use a span or div, since this is far more semantic (i.e. users/crawlers will know it's supposed to do something since it's a link).

You should also avoid using inline Javascript (i.e. onclick="doSomething()") since this is a huge pain if you ever want to change the behaviour, and you also want to make your Javascript as unobtrusive as possible.

whostolemyhat
  • 3,107
  • 4
  • 34
  • 50
1

yes, href="#" makes ou scroll...

You can try: 

<a href="javascript:void(0);" onclick="doIt(); return false;">Woho</a>
Fab V.
  • 1,052
  • 12
  • 17
0

Why not use onclick

<a href="#" onclick="doMyThing() return false;" />

Similar discussion on SO, href-tag-for-javascript-links-or-javascriptvoid0

Community
  • 1
  • 1
mprabhat
  • 20,107
  • 7
  • 46
  • 63
0

For a good markup if you want an event on same page. So, it's better if you use div or span for this & define your click event on it.

div{
 color:red;
}

JS

$('div').click{function(

)};
sandeep
  • 91,313
  • 23
  • 137
  • 155
0
href="javascript:void(0)"

Thanks Yaniro

Community
  • 1
  • 1
Rootical V.
  • 829
  • 1
  • 11
  • 21
0

As @Yaniro commented you can use href="javascript:void(0)", the reason for this is:

JavaScript Void 0 Explanation

Web browsers will try and take whatever is used as a URL and load it. The only reason we can use a JavaScript Alert statement without loading a new page is because alert is a function that returns a null value. This means that when the browser attempts to load a new page it sees null and has nothing to load.

The important thing to notice here is that if you ever do use a JavaScript statement as the URL that returns a value, the browser will attempt to load a page. To prevent this unwanted action, you need to use the void function on such statement, which will always return null and never load a new page.

Extracted from: JavaScript Void 0 Explanation

Community
  • 1
  • 1
jacqijvv
  • 870
  • 6
  • 17
0

You can simply use the onclick attribute in any element, e.g.

<span onclick="foo()">Do something</span>

The habit of using href="#" is a holdover from the early days when browsers did not support onclick generally, only for links (in the technical sense: a elements with href attribute). That’s water under the bridge, but old habits often don’t die, especially if people just adopted them without knowing the reasons.

Instead of span, you could use a too. Without any href attribute, an a element has no special meaning.

By nondisruptiveness principles, the element should be generated dynamically with JavaScript instead of being a static part of the page (since when JavaScript is disabled, it would just sit there, making an impression of being relevant, but without doing anything).

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390