jqueryで非表示のdivをロード - divを検出

Question

私はいくつかの非表示のdivを持つページを持っており、リンクがクリックされたときにのみ表示されます。

それはこの空白のサマリーページ

始まりますし、約クリックとき、それは内容についてように

とをロードします。..しかし、私のスクリプト右私はそれが欲しいほどダイナミックではありません。ユーザーがクリックしている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

についてはすべてのdivを非表示にすることができますそのリンクをクリックしている間のみコンテンツ。

他のリンクをタップすると、現在のコンテンツが非表示になり、選択したリンクのコンテンツが表示されます。私はあなたのために[フィドル] [1]を作成しました。

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

Answer 2

トグル機能を実装するだけです。

$('.top').on('click', function() { 
 
\t $parent_box = $(this).closest('.box'); 
 
\t $parent_box.siblings().find('.bottom').hide(); 
 
\t $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>

Answer 3

この

$(".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/