如果用户在同一选项卡中打开了链接，则显示一个div

Question

HTML：

<div class="example">
<a href="#">Open this link</a>
</div>

如果用户在同一标签中打开链接，我想显示一个div。

jQuery：

$(document).ready(function() {
   $('a').click(function() {
      $(this).addClass('someclass');
   });
});

例：

用户单击链接，将显示一个div，其中显示“正在加载”，并且在其他页面加载时，该div自然消失。

但是，如果用户在新选项卡中打开链接，则会显示div，但不会消失，因为用户不会转到其他页面。

我能做什么？

Answer 1

您可以在click函数本身中显示div。 像下面这样的事情应该做你想要的

$('nav a').click(function() { // More specific selector to only affect nav links
  $('#divToShow').css({
                 display : "block",
                 opacity : 1
  });
});

假设div最初具有类似于以下样式的样式

#divToShow {
    display:none;
    opacity:0;
    -webkit-transition:.3s;
    -moz-transition:.3s;
    -ms-transition:.3s;
    transition:.3s;
    /* Your other styles */
}

如果您确实想添加一个类，则可以执行以下操作

$('nav a').click(function() { // More specific selector to only affect nav links
  $(document.body).addClass("someclass");
});

与添加的CSS

.someclass #divToShow {
    display:block;
    opacity:1;
}

Answer 2

编辑 ：阅读以下评论以获取全文。

如果我对您的理解正确，那么您会想要以下内容：

#loading {
  display: none;
}

<div class="example">
  <a href="#">Link1</a>
  <a href="#">Link2</a>
  <a href="#">Link3</a>
  <a href="#">Link4</a>
</div>

<div id="loading">Loading...</div>

$(document).ready(function() {
  $('a').click(function() {
    $("#loading").show(); // .. or animate() or whatever()
  });
});