Klicken Sie auf eine bestimmte Schaltfläche, um eine bestimmte ID anzuzeigen

Question

Ich habe Probleme zu versuchen, herauszufinden, wie ein bestimmtes Element angezeigt wird, wenn Sie auf eine bestimmte Schaltfläche klicken und dann die anderen Geschwister ausblenden.

Also, was ich habe, ist 6 Tasten.

Service 1-6

Wenn jemand auf Dienst 1 klicken, würde ich meinen service-display-box Abschnitt angezeigt werden soll (ich habe es als display:none auf Seite Last gesetzt) ​​und dann nur für das Service-1-Gehalt zu erscheinen.

Die Art, wie ich es jetzt habe, verbirgt die Geschwister-Tasten, die ich habe und zeigt nicht die service-display-box oder einen der Service-Bereiche.

Ich habe eine Geige unten enthalten.

Service-Tasten - Wenn Sie auf Dienst klicken 1

<div id="service-tabs-container"> 
    <div class="service-tab-block" id="service_tab1">Service 1</div> 
    <div class="service-tab-block" id="service_tab2">Service 2</div> 
    <div class="service-tab-block" id="service_tab3">Service 3</div> 
    <div class="service-tab-block" id="service_tab4">Service 4</div> 
    <div class="service-tab-block" id="service_tab5">Service 5</div> 
    <div class="service-tab-block" id="service_tab6">Service 6</div> 
    </div> 
</div> 

Ich möchte dies zeigen:

<div class="service-item-box" id="service1"> 
     <div class="service-item-title">Service 1</div> 
    </div> 

Fiddle

Answer 1

Sie müssen die Nummer aus der ID auf die bekommen Service-Registerkarte, die Sie wollen, dann an die ID der Service-Artikel-Box anfügen:

$('.service-tab-block').click(function() { 
    $('.service-tab-block').css({"background":"purple"}); 
    $(this).css({"background":"#000", "color":"#FFF"}); 

    //To get the service display box to show 
    var item_number = $(this).attr('id').replace('service_tab', ''); 
    $('#service-display-box').show(); 
    $('#service'+item_number).show().siblings().hide(); 
}) 

https://jsfiddle.net/esayoaqg/1/