如何顯示隱藏鏈接中的特定部分

Question

我有多個鏈接轉到同一頁面，但我希望顯示該頁面的不同部分（最好在頁面頂部）。問題是，這些部分隱藏在頁面加載和它們所在的容器中。我解決了如何讓容器顯示，但它顯示了所有不同的部分，當我只需要點擊一個部分時鏈接，以顯示。即：

我有以下鏈接：

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

然後serviceCheck1頁上我有這樣的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> 

如果我會點擊該內容的鏈接，服務2，我會想要顯示service-display-box然後顯示#service2 div，那麼它的所有兄弟姐妹都不會顯示。

這裏是我的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

看來好像是不正確形成你的節選擇。從本質上發生這種情況：

1. 您點擊<a href="serviceCheck1#service1">Service 1</a>
2. 的serviceCheck1頁面加載。
3. 此行運行：var sectionName = window.location.hash.slice(1);
4. sectionName現在包含"service1"
5. 此行運行：$('#service' + sectionName).show().siblings().hide();
6. 這個計算結果爲$('#serviceservice1').show().siblings().hide();
7. 瀏覽器無法與ID serviceservice1
8. 什麼也沒有發生查找元素:)

相反，因爲window.location.hash包含#service1已經，只是運行以下命令：

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

這將找到合適的元素，表現出來，而隱藏其兄弟姐妹。

Answer 2

你可以嘗試使用CSS來控制可見性，並簡單地切換一類與JS。

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