Show a div if the user opened the link in the same tab

Question

Html:

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

I would like to show a div if the user open the link in the same tab.

Jquery:

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

Example:

The user click on the link, a div appear showing the "loading", and the div disappear naturally when the other page loads.

But, if the user open the link in a new tab, the div appear, but don't desappear, because the user is not going to the other page.

What can i do?

Answer 1

You can show the div in the click function itself. Something like the following should do what you want

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

Assuming that the div originally has some sort of styles similar to

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

If you really want to add a class instead you can do something like this

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

with the added CSS of

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

Answer 2

Edit: Read the comments below for the full story.

If I understand you correctly, you'd like something like this:

#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()
  });
});