jquery - 通过点击导航来切换隐藏的div？

Question

如何通过单击导航 anchor 来切换隐藏的 div？

请看这个 fiddle http://jsfiddle.net/rabelais/4rfYB/1/

我通过单独命名每个 id 来写得很长，但是一定有更短的写法吗？

$('#link1').click(function() {
    $('#1').show()
    $('#2, #3').hide()
})
$('#link2').click(function() {
    $('#2').show()
    $('#1, #3').hide()
})
    $('#link3').click(function() {
    $('#3').show()
    $('#2, #1').hide()
})

Answer 1

http://jsfiddle.net/4rfYB/2/

$('nav a').click(function() {
  $('.navLinks').hide();                 // Hide all
  $(this.getAttribute('href')).show();   // Show HREF/to/ID one
});

因此您只需要获取 anchor 的 href (即 #1)并定位所表示的 jQuery $() 元素 ID通过该 href 值:)

如果您想要oneliner:http://jsfiddle.net/4rfYB/5/

$('.navLinks').hide().filter(this.getAttribute('href')).show();

您还可以使用不太灵活的方式，使用 .eq() 和 .index() http://jsfiddle.net/4rfYB/7/

$('.navLinks').hide().eq( $(this).index() ).show();

_{请注意，数字 ID 仅在 HTML5 中有效!}