Как получить ссылку, которая ничего не делает

Я создал поисковую систему, используя Angular и Bootstrap. Я создал другую вкладку результаты , как показано на рисунке Tabs . При щелчке правой кнопкой мыши на вкладке не отображается опция ссылки, поскольку мы получаем любую ссылку. ссылка на правую кнопку мыши. В настоящее время я использую <li>тег и бутстрап для создания вкладок разного раздела результатов. Вот код для этого

<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>

После нажатия на ссылку все обрабатывается функциями, которые выполняются при клике. Все, что я хочу сделать, это сделать ссылку, чтобы пользователь мог открыть ее на новой вкладке, и состояние приложения не должно меняться вообще. Как это возможно? Я пытался сделать это с помощью маршрутизации, но все усложнилось. Я также следил за некоторыми ответами здесь. Создайте HTML-ссылку, которая ничего не делает (буквально ничего), но они не работают. Пожалуйста помоги. Я пробовал все ответы оттуда, открывая ссылку на новой вкладке, только нарушает состояние URL.

javascript,html,css,angular,typescript,

1

Ответов: 2


3

Использование <a href="#"></a>сделает страницу прокруткой вверх.

Использование javascript:void(0):

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

Или, что то же самое, используйте javascript:;:

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

Или, с HTML5, просто опустите атрибут href:

<a>Clicking here does nothing</a>

Вы можете использовать, event.preventDefault()чтобы предотвратить действие по умолчанию для ссылки.

<a href="http://www.google.com">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 = function(e){
    }
  });
}
</script>


1

Нажав на кнопку, больше ссылок не будет.

Таким образом, у вас все еще есть hoverпредварительный просмотр. Как и так далее google.de...

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.com">Valid Link</a><br>
<button id='hitMe'>Disable link.</button>

JavaScript, HTML, CSS, угловая, машинопись,
Похожие вопросы