0

I tried <a href="#"></a>. It didn't worked for :

<a href="#" id="home" onClick="changeContent('frontmain');"><span>Home</span></a>

It has a javascript function changeContent.

The code works for every browsers expect Firefox open new page on every click.

I have also tried follow code:

<a href="javascript:;" id="home" onClick="changeContent('frontmain');"><span>Home</span></a>

it still didn't work. Firefox opens about:blank new browser page.

Any help would be appreciated.Thank you

t.niese
  • 39,256
  • 9
  • 74
  • 101
user3492330
  • 1

3 Answers3

1

I assume you want a piece of text change when you click it. Not sure what exactly you want to achieve, but you most likely don't need the <a> element for this.

Make a <span>, <div> or <button> element, style it with css and add your onclick event handler there. 

<span role="button" tabindex="0" class="styleMe" onclick="changeContent('frontmain');">Home</span>

The "role" attribute helps to clarify the intended use as a button for accessibility.

The "tabindex" attribute allows to navigate to this action without using a mouse.

You probably want to set the cursor css attribute in your styling to visualize that it's clickable.

span.styleMe{
    cursor:pointer;
}

The reason, besides having to deal with the href issue is that I personally always associate anchor elements with navigating away from the current page and due to a slow internet connection I never use them directly always open in another tab.

I always want to let it load in a new tab while I continue browsing the current page, because a new page takes several minutes to load on average.

That's why I suggest to make a clear distinction between "a click that will make you wait minutes and loose the page you waited several minutes to load unless you choose an alternative open-in-new-tab-option" and "a click that will instantly change the content of the current page or instantly scroll to a place somewhere on the same page"

Winchestro
  • 2,138
  • 14
  • 18
  • 2
    An `a` tag with an `href` has the semantic information that something will happen on a click. `p` or `b` have just structural informations. So if you suggest to use those you should also suggest to use _aria_ – t.niese May 15 '14 at 06:04
  • Not sure what you mean exactly, could you please clarify what you mean with "semantic/structural information" and "something will happen"? – Winchestro May 15 '14 at 06:15
  • Nevermind, I googled it. Thanks for pointing it out. I apologize that I didn't think about it in my initial suggestion. – Winchestro May 15 '14 at 06:37
  • 2
    One small suggestion, while it is not necessarily wrong to use `p` with a role `button` in this particular case a _neutral_ tag like `span` or `div` would be better, as the `p` has the meaning _paragraph_. (And as it seems that it is for navigation I still would probably stay with an `a` tag, but that something more opinion based) – t.niese May 15 '14 at 07:57
0

Take a look on onClick event description. As you can read the onClick event can be used nearly within all HTML elements. Therefore it would be better not using the A element. Use element P or SPAN or a button decorated using CSS to make it clear that a visitor can click on it to change something.

Mofi
  • 46,139
  • 17
  • 80
  • 143
  • 1
    If you're going to use a `

    ` or `` element, add `tabindex="0"` to the element so users that navigate with the keyboard can activate the action.

     – steveax May 15 '14 at 06:34
0

The answer to this question is open to debate. An excellent discussion regarding this topic can be found here: Which "href" value should I use for JavaScript links, "#" or "javascript:void(0)"?

Community
  • 1
  • 1
Matt Burnell
  • 2,646
  • 1
  • 22
  • 23