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

Question

我有一个包含一些隐藏 div 的页面，它们仅在单击它们的链接时才会显示。

将从这个空白的摘要页面开始

当点击 About 时，它会加载关于内容

等等.. 但是，我现在的脚本并不像我希望的那样动态。如何隐藏当前显示的 div 并加载用户单击的 div？至于现在的脚本，就好像每个链接在页面加载时都会被用户首先点击......

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

Answer 1

做这样的事情

$(".wrapper a").on("click",function(){
        // without using any unique/id. We detect based on their index position. link index = hideme index
    var ind = $(this).index('a'); 
    $(".wrapper a").removeClass("active");
    $(this).addClass("active");

    $(".wrapper-content .hideme").hide();
    $(".wrapper-content .hideme").eq(ind).show();
});

还有 jsfiddle：https://jsfiddle.net/synz/fdq6f35z/

Answer 2

您可以在加载页面时隐藏所有 div，仅在单击链接时显示内容。

当您点击另一个链接时，隐藏当前内容并显示所选链接的内容。我为你创建了一个 [fiddle][1]。

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

Answer 3

只需要实现切换功能。

$('.top').on('click', function() {
	$parent_box = $(this).closest('.box');
	$parent_box.siblings().find('.bottom').hide();
	$parent_box.find('.bottom').toggle();
});

.container .box {
  float: left;
  width: 150px;
  margin: 20px;
}

.container .box .top {
  padding: 12px;
  background-color: #3e1231;
  color: white;
  cursor: pointer;
}

.container .box .bottom {
  padding: 12px;
  background-color: red;
  color: white;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="box">
    <div class="top">
      About
    </div>
    <div class="bottom">
      ABout Me
    </div>
  </div>
  <div class="box">
    <div class="top">
     Service
    </div>
    <div class="bottom">
      all Services 
    </div>
  </div>
  <div class="box">
    <div class="top">
      Clients
    </div>
    <div class="bottom">
      All Clients
    </div>
  </div>
</div>