I have created a search engine using Angular and Bootstrap. I have created different results tab as shown in image Tabs . Right clicking on tab does not show the option of a link as we get on any link. link on right click Currently I am using <li> tag and bootstrap to create the tabs of different result section. Here is the code for that

<ul type="none" id="search-options">
        <li [class.active_view]="Display('all')" (click)="docClick()">All</li>
        <li [class.active_view]="Display('images')" (click)="imageClick()">Images</li>
        <li [class.active_view]="Display('videos')" (click)="videoClick()">Videos</li>
        <li [class.active_view]="Display('news')" (click)="newsClick()">News</li>
        <li class="dropdown">
          <a href="#" id="settings" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
            Settings
          </a>
          <ul class="dropdown-menu" aria-labelledby="settings" id="setting-dropdown">
            <li routerLink="/preferences">Search settings</li>
            <li data-toggle="modal" data-target="#customization">Customization</li>
          </ul>
        </li>
        <li class="dropdown">
          <a href="#" id="tools" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
            Tools
          </a>
          <ul class="dropdown-menu" aria-labelledby="tools" id="tool-dropdown">
            <li (click)="filterByContext()">Context Ranking</li>
            <li (click)="filterByDate()">Sort by Date</li>
            <li data-toggle="modal" data-target="#myModal">Advanced Search</li>
          </ul>
        </li>
      </ul>

After clicking on the link everything is handled by the functions which get executed on click event. All I want to do that is make that a link, so that user can open it in new tab and state of the app should not change at all. How that is possible? I have tried to do that using routing but things became more plicated. i also followed some answers from here Make a HTML link that does nothing (literally nothing) but they do not work. Please help. I have tried all the answers from there opening link in new tab just disturbs the state of URL.

I have created a search engine using Angular and Bootstrap. I have created different results tab as shown in image Tabs . Right clicking on tab does not show the option of a link as we get on any link. link on right click Currently I am using <li> tag and bootstrap to create the tabs of different result section. Here is the code for that

<ul type="none" id="search-options">
        <li [class.active_view]="Display('all')" (click)="docClick()">All</li>
        <li [class.active_view]="Display('images')" (click)="imageClick()">Images</li>
        <li [class.active_view]="Display('videos')" (click)="videoClick()">Videos</li>
        <li [class.active_view]="Display('news')" (click)="newsClick()">News</li>
        <li class="dropdown">
          <a href="#" id="settings" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
            Settings
          </a>
          <ul class="dropdown-menu" aria-labelledby="settings" id="setting-dropdown">
            <li routerLink="/preferences">Search settings</li>
            <li data-toggle="modal" data-target="#customization">Customization</li>
          </ul>
        </li>
        <li class="dropdown">
          <a href="#" id="tools" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
            Tools
          </a>
          <ul class="dropdown-menu" aria-labelledby="tools" id="tool-dropdown">
            <li (click)="filterByContext()">Context Ranking</li>
            <li (click)="filterByDate()">Sort by Date</li>
            <li data-toggle="modal" data-target="#myModal">Advanced Search</li>
          </ul>
        </li>
      </ul>

After clicking on the link everything is handled by the functions which get executed on click event. All I want to do that is make that a link, so that user can open it in new tab and state of the app should not change at all. How that is possible? I have tried to do that using routing but things became more plicated. i also followed some answers from here Make a HTML link that does nothing (literally nothing) but they do not work. Please help. I have tried all the answers from there opening link in new tab just disturbs the state of URL.

• javascript
• html
• css
• angular
• typescript

• No I have tried all the answers from there. I want to get a effect like Google. Go to Google, Search for a query and right click on image section and open it in new tab it opens the image section as if it is opened in same tab. – Sachin Singh Commented Jun 23, 2018 at 20:18
• 1 Like @hev1 said, a link that doesn't go anywhere can be achieved by using <a>Link text</a>. The question is... why do you want this to be an <a> element? What are you expecting that element to do if it's not link to something? Why not use a simple <span> for example? – Victoria Ruiz Commented Jun 23, 2018 at 20:21
• I think you need to edit your question then, that is not a link that does nothing. – Jake Commented Jun 23, 2018 at 20:21
• I want to get it opened in a new tab. But currently right clicking on it does not give any option to open it in new tab. After using <a> tag I was getting that option but opening in new tab disturbs the URL. – Sachin Singh Commented Jun 23, 2018 at 20:25
• @Jake please edit my question, the way you want. Actually I thought this question will help. – Sachin Singh Commented Jun 23, 2018 at 20:27

3 Answers 3

Using <a href="#"></a> will make the page scroll to the top.

Use javascript:void(0):

<a href="javascript:void(0)">Clicking here does nothing</a>

Or equivalently, use javascript:;:

<a href="javascript:;">Clicking here does nothing</a>

Or, with HTML5, just omit the href attribute:

<a>Clicking here does nothing</a>

You can use event.preventDefault() to prevent the default action of the link from being taken.

<a href="http://www.google.">Valid Link</a><br>
<button id='hitMe'>Disable link</button>
<br/>
<button id="enable">Enable link</button>
<script>
document.getElementById('hitMe').onclick = function() { // button click
  document.querySelectorAll('a').forEach(a =>{
  	a.onclick = function(e){
    	e.preventDefault();
      return false;
    }
  });
};
document.getElementById("enable").onclick = function(){
  document.querySelectorAll('a').forEach(a =>{
  	a.onclick = null;
  });
}
</script>

By clicking the button, no more links will be followed.

Like this you still have the hover destination preview. Like google.de etc...

document.getElementById('hitMe').onclick = function() { // button click
  [...document.querySelectorAll('a')].forEach(function(el){
    el.onclick = function( e ) { // all 'a'
      return false;
    }
  });
};

<a href="https://google.">Valid Link</a><br>
<button id='hitMe'>Disable link.</button>

use

javascript:;

as href attribute and add

event.preventDefault()

onclick method.

<a href="javascript:;" onclick="event.preventDefault()">Click me</a>