How to make an anchor tag refer to nothing

Question

I use jQuery  I need to make some anchor tags perform no action   I usually write it like this    lt a href     gt link lt  a gt    However this refers to the top of the page

User · Answer

Here are the three ways for  lt a gt  tag s href tag property refer to nothing    lt a href  JavaScript void 0   gt  link  lt  a gt    lt a href  javascript    gt link lt  a  gt    lt a href     onclick  return false   gt  Link  lt  a gt

User · Answer

You can do it by    lt a style  cursor pointer   gt Link lt  a gt

User · Answer

This answer should be updated to reflect new web standards  HTML5    This    lt a tabindex  0  gt This represents a placeholder hyperlink lt  a gt        is valid HTML5  The tabindex attribute makes it keyboard focusable like normal hyperlinks  You might as well use the span element for this as mentioned previously  but I find using the a element more elegant   See  https   w3c github io html-reference a html and  https   html spec whatwg org multipage links html attr-hyperlink-href

User · Answer

The correct way to handle this is to  break  the link with jQuery when you handle the link  HTML   lt a href     id  theLink  gt My Link lt  a gt    JS      theLink   click function ev          do whatever you want here      ev preventDefault        ev stopPropagation          Those final two calls stop the browser interpreting the click

User · Answer

Make sure all your links that you want to stop have href       or anything you want  really   and then use this   jq  body   on  click stop link    a href         function event         event preventDefault

User · Answer

There are a few less than perfect solutions   1  Link to a fake anchor   lt a href     gt    Problem  clicking the link jumps back to the top of the page  2  Using a tag other than  a   Use a span tag and use the jquery to handle the click  Problem  breaks keyboard navigation  have to manually change the hover cursor  3  Link to a javascript void function   lt a href  javascript void 0    gt   lt a href  javascript    gt    Problem  breaks when linking images in IE  Solution  Since these all have their problems  the solution I ve settled on is to link to a fake anchor  and then return false from the onClick method    lt a href     onClick  return false   gt    Not the most concise of solutions  but it solves all the problems with the above methods

User · Answer

What do you mean by nothing    lt a href  about blank  gt blank page lt  a gt    or   lt a href  whatever  onclick  return false   gt won t navigate lt  a gt

User · Answer

I encountered this issue on a WordPress site  The headers on dropdown menus always had the attribute href    and the header plugin being used only allowed standard urls  The easiest solution there was just to run this code in the footer   jQuery   href       click function e       e preventDefault          This will prevent blank anchors from doing anything

User · Answer

You can have an HTML anchor  a tag  without an href attribute  Leave off the href attribute  amp  it won t link to anything    lt a gt link lt  a gt

User · Answer

I know this is tagged as a jQuery question  but you can answer this with AngularJS  also   in your element  add the ng-click directive and use the  event variable which is the click event    prevent its default behavior    lt a href     ng-click   event preventDefault    gt    You can even pass the  event variable into a function    lt a href     ng-click  doSomething  event   gt    in that function  you do whatever you want with the click event

User · Answer

I know this is an old question  but I thought I d add my two cents anyway   It depends on what the link is going to do  but usually  I would be pointing the link at a url that could possibly be displaying doing the same thing  for example  if you re making a little about box pop up    lt a id  about  href   about  gt About lt  a gt    Then with jQuery      about   click function e            aboutbox   show        e preventDefault          This way  very old browsers  or browsers with JavaScript disabled  can still navigate to a separate about page  but more importantly  Google will also pick this up and crawl the contents of the about page

User · Answer

I think you can try    lt a href  JavaScript void 0   gt link lt  a gt    The only catch I see over here is high level browser security may prompt on executing javascript   Though this is one of the easier way than    lt a href     onclick  return false   gt Link lt  a gt    this should be used sparingly  Read this article for some pointers https   web archive org web 20090301044015 http   blog reindel com 2006 08 11 a-hrefjavascriptvoid0-avoid-the-void

User · Answer

lt a href     onclick  SomeFunction     class  SomeClass  gt sth  lt  a gt    this was my anchor tag  so return false on onClick    event is not usefull here  I just removed href     property and it worked for me just like below   lt a onclick  SomeFunction     class  SomeClass  gt sth  lt  a gt    and i needed to add this css    SomeClass       cursor  pointer

User · Answer

There are so many ways to do it like   Dont add and href attribute   lt a name  here  gt  Test  lt a gt    You can add onclick event instead of href like    lt a name  here  onclick  YourFunction    gt  Test  lt a gt    Or you can add void function like this which would be the best way    lt a href  javascript void 0    gt    lt a href  javascript    gt

User · Answer

React no longer support using a function like this href  javascript void 0   in your anchor tag  but here is something that works pretty well    lt a href     onClick       gt  null   gt link lt  a gt

User · Answer

If you don t want to have it point to anything  you probably shouldn t be using the  lt a gt   anchor  tag   If you want something to look like a link but not act like a link  it s best to use the appropriate element  such as  lt span gt   and then style it using CSS    lt span class  fake-link  id  fake-link-1  gt Am I a link  lt  span gt    fake-link       color  blue      text-decoration  underline      cursor  pointer      Also  given that you tagged this question  jQuery   I am assuming that you want to attach a click event hander  If so  just do the same thing as above and then use something like the following JavaScript       fake-link-1   click function            put your code here

User · Answer

The only thing that worked for me was a combination of the above  First the li in the ul  lt li gt  lt a onclick  quot LoadTab2 1   quot  href  quot JavaScript void 0  quot  gt All Assigned lt  a gt  lt  li gt   Then in the LoadTab2 1 I manually switched the tab divs     quot  tabs-2-1 quot   hide           quot  tabs-2-2 quot   show     This is because the disconnection of the  also disconnects the action in the tabs  You also need to manually do the tab styling when the primary tab changes things     quot  secTab1 quot   addClass  quot ui-tabs-active quot   addClass  quot ui-state-active quot   addClass  quot ui-state-hover quot   addClass  quot ui-state-focus quot           quot  secTab1 a quot   css  quot color quot    quot  ffffff quot

User · Answer

To make it do nothing at all  use this    lt a href  javascript void 0   gt       lt  a gt

[jquery] How to make an anchor tag refer to nothing?

Examples related to jquery

Examples related to html