javascript 如何获得一个什么都不做的链接

iyr7buue 于 2023-01-19 发布在 Java

关注(0)|答案(3)|浏览(145)

我已经创建了一个搜索引擎使用Angular 和 Bootstrap 。我已经创建了不同的结果选项卡，如图Tabs所示。右键单击选项卡不会显示链接的选项，因为我们得到的任何链接。link on right click目前我正在使用<li>标记和 Bootstrap 来创建不同结果部分的选项卡。这里是代码

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

点击链接后，所有的事情都是由函数处理的，这些函数在点击事件时执行。我所要做的就是把它变成一个链接，这样用户就可以在新选项卡中打开它，应用程序的状态应该根本不会改变。这怎么可能呢？我已经尝试使用路由来做到这一点，但事情变得更加复杂。我也遵循了一些答案，从这里Make a HTML link that does nothing (literally nothing)，但他们不工作。请帮助。我已经尝试了所有的答案，从那里打开链接在新的标签页只是扰乱了网址的状态。

JavaScript

来源：https://stackoverflow.com/questions/51004557/how-to-get-a-link-that-do-nothing

3条答案

按热度按时间

d4so4syb1#

使用<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 = null;
  });
}
</script>

赞(0）回复(0）举报 2023-01-19

v8wbuo2f2#

单击此按钮后，将不再显示任何链接。
像这样你仍然有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>

赞(0）回复(0）举报 2023-01-19

myzjeezk3#

使用
javascript语言：;
作为href属性并添加
事件. preventDefault（）
单击方法。

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

赞(0）回复(0）举报 2023-01-19

我来回答

javascript 如何获得一个什么都不做的链接

3条答案

相关问题

热门标签

最新问答