Question

页面的菜单项将替换“div id = foo_（当前菜单项）”，并在'div class = foo'中使用'div id = foo_（所选菜单项）'

这就是我所拥有的，并试着保持你的早餐......

    $('#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();
    });

Answer 1

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

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

   $('.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选项卡插件为您处理这一切： - ）

在javascript中用switch / case替换一堆show / hide

1 个答案: