2

页面的菜单项将在 'div class=foo' 中将 'div id=foo_(current menu item)' 替换为 'div id=foo_(selected menu item)'

这就是我所拥有的，并尽量减少你的早餐......

    $('#t1').click(function() {
        $('#attorney').show();
        $('#insurance,#financial,#estate,#trust,#death').hide();
    });

    $('#t2').click(function() {
        $('#insurance').show();
        $('#attorney,#financial,#estate,#trust,#death').hide();
    });

    $('#t3').click(function() {
        $('#financial').show();
        $('#attorney,#insurance,#estate,#trust,#death').hide();
    });

    $('#t4').click(function() {
        $('#estate').show();
        $('#attorney,#insurance,#financial,#trust,#death').hide();
    });

    $('#t5').click(function() {
        $('#trust').show();
        $('#attorney,#insurance,#financial,#estate,#death').hide();
    });

    $('#t6').click(function() {
        $('#death').show();
        $('#attorney,#insurance,#financial,#estate,#trust').hide();
    });
4

1 回答 1

2

Switch 语句有点难看。

var things = ['attorney', 'estate', 'insurance', 'financial', 'trust', 'death'];
var guide = {
  t1: 'attorney', t2: 'estate', t3: 'insurance', t4: 'financial', t5: 'trust', t6: 'death'
};

$('#t1, #t2, #t3, #t4, #t5, #t6').click(function() {
  var clicked = $(this).attr('id');
  $.each(things, function(_, thing) {
    var $thing = $('#' + thing);
    if (guide[clicked] == thing) $thing.show(); else $thing.hide();
  });
});

您也可以考虑使用而不是直接在“t”事物上设置事件处理程序live()，无论它们是什么。如果可以为所有“事物”（律师等）赋予一个类名，那也会更整洁，因为这样您就可以在点击处理程序中快速隐藏它们

   $('.thingClass').hide();

然后只使适合单击的选项卡的可见。然后它可能看起来像这样：

var guide = {
  t1: 'attorney', t2: 'estate', t3: 'insurance', t4: 'financial', t5: 'trust', t6: 'death'
};
$('#t1, #t2, #t3, #t4, #t5, #t6').click(function() {
  $('.thingClass').hide();
  $('#' + guide[$(this).attr('id')]).show();
});

最后，您可能会考虑让一个可用的 jQuery 选项卡插件为您处理整个事情 :-)

于 2010-03-28T21:32:04.183 回答