使用jquery加载隐藏的div - 检测哪个div

Question

I have a page with some hidden divs and they will show only when their links are clicked.

It will start with this blank summary page

And when About is click it will load about content

And so on.. however, my script right now is not as dynamic as I want it to be. How can I hide which ever div that's currently showing and load the div that is being clicked by user? As for now the script is as if each link is going to be first clicked by user when page is loaded...

$(function() {
  $.ajaxSetup({
    cache: false
  });
  
  var ajax_load = "<img id='loader' class='loader' src='http://gifimage.net/wp-content/uploads/2017/08/loading-gif-transparent-4.gif' />";

  $("#abt-ctrl").click(function() {
    $('#content-services a').removeClass('active');
    $(this).addClass('active');

    $("#service-content").fadeOut('fast', function() {
      $("#service-content").html(ajax_load);
      $("#service-content").fadeIn('slow', function() {
        $("#loader").hide();
        $('#about-content').fadeIn();
      });
    });  
  });
  
  $("#more").click(function() {
    $('#content-services a').removeClass('active');
    $(this).addClass('active');
    $("#service-content").fadeOut('fast', function() {
      $("#service-content").html(ajax_load);
      $("#service-content").fadeIn('slow', function() {
        $("#loader").hide();
        $('#more-content').fadeIn();
      });
    });
  });  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper wrapper-content content-bg content-left-padding">
  <div id="service-content" class="row">
    <h2 style="margin-top: 22px; margin-left: 40px;max-width: 700px;margin-right: 50px;">Summary</h2>
    <p style="margin-left: 40px;max-width: 700px;margin-right: 50px;"></p>

  </div>
  <div id="about-content" class="hideme row">
    <div class="col-lg-12">
      <h2 style="margin-top: 22px; margin-left: 40px;max-width: 700px;margin-right: 50px;">About </h2>
      <p style="margin-top: 41px; margin-left: 40px;max-width: 700px;margin-right: 50px;">
        Gummi bears chocolate caramels biscuit bonbon. Candy donut apple pie. Bear claw apple pie sugar plum tiramisu jelly donut. Liquorice marzipan biscuit gummi bears dragée marshmallow. Jelly-o marshmallow candy pie gummi bears jujubes candy canes pie. Pastry
        gummi bears gummies cheesecake biscuit fruitcake candy canes soufflé soufflé. Chocolate bar apple pie jelly. Jelly croissant chocolate bar icing tart apple pie candy bonbon jelly beans. Chocolate lollipop soufflé tiramisu carrot cake danish sesame
        snaps soufflé.

      </p>
    </div>
  </div>
  <div id="more-content" class="hideme row">
    <div class="col-lg-12">
      <h2 style="margin-top: 22px; margin-left: 40px;max-width: 700px;margin-right: 50px;">More</h2>
      <p style="margin-top: 41px; margin-left: 40px;max-width: 700px;margin-right: 50px;">
        Croissant tart donut bear claw soufflé halvah. Brownie croissant chocolate. Pudding fruitcake gingerbread biscuit chocolate croissant gummi bears. Jujubes powder sugar plum tootsie roll caramels carrot cake tart icing. Cake oat cake chocolate cake gummies
        carrot cake jujubes carrot cake. Sweet cake chocolate cake fruitcake cookie pie gingerbread cupcake cookie. Marshmallow tiramisu wafer croissant tootsie roll. Wafer sweet roll cupcake chocolate cake apple pie croissant marshmallow muffin.
      </p>
    </div>
  </div>
</div>

</div>

Answer 1

You can hide all the divs while loading the page and show the content only while clicking on the link.

When you tap on another link, hide the current content and show the selected link's content. I have created a [fiddle][1] for you.

 [1]: https://jsfiddle.net/oxxLnk7s/1/