如果用户在同一选项卡中打开链接，则显示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()
  });
});