So zeigen Sie einen bestimmten Abschnitt von einem Link, der ausgeblendet ist

Question

Ich habe mehrere Links, die auf die gleiche Seite gehen, aber ich möchte verschiedene Abschnitte dieser Seite anzeigen (vorzugsweise am oberen Rand der Seite). Das Problem ist, dass diese Abschnitte beim Laden der Seite ausgeblendet sind und auch der Container, in dem sie sich befinden. Ich habe gelöst, wie der Container angezeigt wird, aber es zeigt alle verschiedenen Abschnitte, wenn ich nur den angeklickten haben möchte Link, um zu zeigen. dh:

Ich habe diese Links:

<a href="serviceCheck1#service1">Service 1</a> 
<a href="serviceCheck1#service2">Service 2</a> 
<a href="serviceCheck1#service3">Service 3</a> 

Dann auf der serviceCheck1 Seite Ich habe dieses HTML:

<div id="service-display-box"> 
    <div id="service-display-box-container"> 
    <div class="service-item-box" id="service1"> 
     <div class="service-item-title">Service 1</div> 
    </div> 
    <div class="service-item-box" id="service2"> 
     <div class="service-item-title">Service 2</div> 
    </div> 
    <div class="service-item-box" id="service3"> 
     <div class="service-item-title">Service 3</div> 
    </div> 
    <div class="service-item-box" id="service4"> 
     <div class="service-item-title">Service 4</div> 
    </div> 
    <div class="service-item-box" id="service5"> 
     <div class="service-item-title">Service 5</div> 
    </div> 
    <div class="service-item-box" id="service6"> 
     <div class="service-item-title">Service 6</div> 
    </div> 
    </div> 
</div> 

Wenn ich auf den Link klicken würde, die sagt, Service 2, würde ich will das service-display-box zeigen und dann das #service2 div zeigen, dann alle seine Geschwister nicht anzeigen.

Hier ist mein javascript:

$(function(){ 

    //get the section name from hash 
    var sectionName = window.location.hash.slice(1); 

    //then show the section 
    $('#service-display-box').show(); 
    //$('#' + sectionName).show(); 
    $('#service' + sectionName).show().siblings().hide(); 
}) 

/*var index = location.hash.indexOf('#service'); 
if(index > -1) { 
    var serviceId = parseInt(location.hash.substring(index)); 
    if(serviceId) { 
     $('#service-display-box').show(); 
     $('#service' + serviceId).show().siblings().hide(); 
    } 
}*/ 

Answer 1

Es scheint, als ob Ihre Wähler für den Abschnitt nicht richtig ausgebildet ist. Im Wesentlichen dies geschieht:

1. klicken Sie auf <a href="serviceCheck1#service1">Service 1</a>
2. Die serviceCheck1 Seite geladen wird.
3. Diese Linie läuft: var sectionName = window.location.hash.slice(1);
4. sectionName enthält jetzt "service1"
5. Diese Linie läuft: $('#service' + sectionName).show().siblings().hide();
6. Diese
7. Der Browser $('#serviceservice1').show().siblings().hide(); wertet serviceservice1
8. Es passiert nichts, kein Element mit der ID finden :)

Stattdessen seit window.location.hash enthält #service1 bereits, führen Sie einfach die folgenden:

$(window.location.hash).show().siblings().hide(); 

Welche das entsprechende Element finden, zeigen sie und ihre Geschwister verstecken.

Answer 2

Sie versuchen, mit Hilfe von CSS könnten die Sichtbarkeit zu kontrollieren und einfach eine Klasse mit JS wechseln.

JS:

$('#service-display-box').addClass('visible');// Make the wrapper visible 
$('#service-item-box').removeClass('visible');// Double-check all the other boxes are still hidden 
$('#service' + sectionName).addClass('visible');// Make the target box visible 

CSS:

#service-display-box, 
#service-item-box{ 
    display:none; 
} 
#service-item-box.visible, 
#service-item-box.visible{ 
    display:block; 
}