隠されたリンクから特定のセクションを表示する方法

Question

同じページに複数のリンクがありますが、そのページの異なるセクション（ページの上部に表示されることが望ましい）が必要です。問題は、これらのセクションはページの読み込み時に隠されているので、コンテナも表示されます。コンテナを表示する方法を解決しましたが、クリックしたセクションだけをリンク、表示する。すなわち：私はこのHTMLを持ってserviceCheck1ページのその後

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

：

私はこれらのリンクを持っている

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

私が言うのリンク、サービスの2をクリックしたい場合、私は希望service-display-boxが表示され、次に#service2 divが表示され、そのすべての兄弟が表示されないようにします。あなたは可視性を制御し、単にあなたのJSを持つクラスを切り替えるには、CSSを使用して試みることができる

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

それはセクションのためのあなたの選択が正しく形成されていないかのように表示されます。基本的にこれが起こります。

1. あなたは<a href="serviceCheck1#service1">Service 1</a>
2. serviceCheck1ページのロードをクリックしてください。
3. この行は実行されます。$('#service' + sectionName).show().siblings().hide();
4. これはserviceservice1
5. 何も起こらないidを持つ要素を見つけることができません$('#serviceservice1').show().siblings().hide();
6. ブラウザに評価されます。var sectionName = window.location.hash.slice(1);
7. sectionNameは今、この行が実行さ"service1"
8. が含まれています:)

代わりに、0 、適切な要素を見つけ、それを示して、その兄弟を非表示になります

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

：は#service1はすでに、単に以下を実行含まれています。

Answer 2

：

は、ここに私のjavascriptのです。

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; 
}