Рефакторинг jQuery показать/скрыть

Question

У меня есть серия div, которые я хотел бы показать и скрыть на основе ссылок, которые пользователь может щелкнуть. Есть ли способ реорганизовать эти функции, чтобы они были менее повторяющимися?

Возможно использование переключателя?

$('#section1').hide(); 
$('#section2').hide(); 
$('#section3').hide(); 
$('#section4').hide(); 

$('#section1-link').click(function() { 
    $('#section1').show(); 
    $('#section2').hide(); 
    $('#section3').hide(); 
    $('#section4').hide(); 
}); 
$('#section2-link').click(function() { 
    $('#section1').hide(); 
    $('#section2').show(); 
    $('#section3').hide(); 
    $('#section4').hide(); 
}); 
$('#section3-link').click(function() { 
    $('#section1').hide(); 
    $('#section2').hide(); 
    $('#section3').show(); 
    $('#section4').hide(); 
}); 
$('#section4-link').click(function() { 
    $('#section1').hide(); 
    $('#section2').hide(); 
    $('#section3').hide(); 
    $('#section4').show(); 
}); 

Answer 1

Working fiddle.

Я предлагаю использовать общие классы с помощью data-*, проверьте приведенный ниже пример.

Надеюсь, это поможет.

$('.section-link').on('click', function(){ 
 
    var section_id = '#'+ $(this).data('section'); 
 

 
    $('.section').hide(); //Hide all sections 
 
    $(section_id).show(); //Show the related one 
 
})

div:not(#section1){ 
 
    display:none 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<a href='#' class='section-link' data-section='section1'>Link 1</a> 
 
<a href='#' class='section-link' data-section='section2'>Link 2</a> 
 
<a href='#' class='section-link' data-section='section3'>Link 3</a> 
 
<a href='#' class='section-link' data-section='section4'>Link 4</a> 
 

 
<div class='section' id='section1'>Section 1</div> 
 
<div class='section' id='section2'>Section 2</div> 
 
<div class='section' id='section3'>Section 3</div> 
 
<div class='section' id='section4'>Section 4</div>