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.
Share Improve this question edited Jun 23, 2018 at 20:16 Sachin Singh asked Jun 23, 2018 at 19:50 Sachin SinghSachin Singh 611 silver badge7 bronze badges 8- 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
Reset to default 6Using <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>