Как показать определенный раздел из скрытой ссылки

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. The serviceCheck1 загрузки страницы.
3. Эта линия работает: var sectionName = window.location.hash.slice(1);
4. sectionName теперь содержит "service1"
5. Эта линия работает: $('#service' + sectionName).show().siblings().hide();
6. Это вычисляется $('#serviceservice1').show().siblings().hide();
7. браузер не может найти элемент с идентификатором 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; 
}