Question

我有一个菜单。它是组成菜单项的一组锚定链接。单击菜单项时，它们显示特定的div并隐藏其余的。将添加更多菜单项，因此需要使代码可重用和扩展。该代码有效，但它并不漂亮，我想减少代码的重复。任何帮助，将不胜感激。谢谢

 <div id="product-table-links" class="product-table-links"><a href="#" id="food-product-all" class="table-anchor">All</a>
<a href="#" id="food-product-button1" class="table-anchor" data-page="food1">Food Type 1</a>
<a href="#" id="food-product-button2" class="table-anchor" data-page="food2">Food Type 2</a>
<a href="#" id="food-product-button3" class="table-anchor" data-page="food3">Food Type 3</a>
<a href="#" id="food-product-button4" class="table-anchor" data-page="food4">Food Type 4</a>
<a href="#" id="food-product-button5" class="table-anchor" data-page="food5">Food Type 5</a>
<a href="#" id="food-product-button6" class="table-anchor" data-page="food6">Food Type 6</a>
<a href="#" id="food-product-button7" class="table-anchor" data-page="food7">Food Type 7</a>
<a href="#" id="food-product-button8" class="table-anchor" data-page="food8">Food Type 8</a></div>
<div class="product-divTable" style="width: 100%;" >
<div class="product-divTableBody">
<div class="product-divTableRow" id="food1">
  <div class="product-divTableCell">food section 1</div>
</div>
<div class="product-divTableRow" id="food2">
  <div class="product-divTableCell">food section 2</div>
</div>
<div class="product-divTableRow" id="food3">
  <div class="product-divTableCell">food section 3</div>
</div>
<div class="product-divTableRow" id="food4">
  <div class="product-divTableCell">food section 4</div>
</div>
<div class="product-divTableRow" id="food5">
  <div class="product-divTableCell">food section 5</div>
</div>
<div class="product-divTableRow" id="food6">
  <div class="product-divTableCell">food section 6</div>
</div>
<div class="product-divTableRow" id="food7">
  <div class="product-divTableCell">food section 7</div>
</div>
<div class="product-divTableRow" id="food8">
  <div class="product-divTableCell">food section 8</div>
</div>
</div>

    $(document).ready(function(){       

          $("#food-product-button1").click(function(e){
            e.preventDefault();
              $('a.table-anchor').removeClass("active");
              $(this).addClass("active");
            $('.product-divTableRow').hide();
              $("#food1").show();
          });

            $("#food-product-button2").click(function(e){
            e.preventDefault();
            $('a.table-anchor').removeClass("active");
              $(this).addClass("active");
            $('.product-divTableRow').hide();
              $("#food2").show();
          });

           $("#food-product-button3").click(function(e){
            e.preventDefault();
               $('a.table-anchor').removeClass("active");
              $(this).addClass("active");
             $('.product-divTableRow').hide();
              $("#food3").show();
          });

            $("#food-product-button4").click(function(e){
              e.preventDefault();
                $('a.table-anchor').removeClass("active");
              $(this).addClass("active");
             $('.product-divTableRow').hide();
             $("#food4").show();
          });

          $("#food-product-button5").click(function(e){
              e.preventDefault();
              $('a.table-anchor').removeClass("active");
              $(this).addClass("active");
               $('.product-divTableRow').hide();
              $("#food5").show();
          });

            $("#food-product-button6").click(function(e){
              e.preventDefault();
                $('a.table-anchor').removeClass("active");
              $(this).addClass("active");
                $('.product-divTableRow').hide();
              $("#food6").show();
          });

            $("#food-product-button7").click(function(e){
              e.preventDefault();
                $('a.table-anchor').removeClass("active");
              $(this).addClass("active");
                 $('.product-divTableRow').hide();
              $("#food7").show();
          });

            $("#food-product-button8").click(function(e){
              e.preventDefault();
                $('a.table-anchor').removeClass("active");
              $(this).addClass("active");
                $('.product-divTableRow').hide();
              $("#food8").show();
          });

            $("#food-product-all").click(function(e){
              e.preventDefault();
                $('a.table-anchor').removeClass("active");
              $(this).addClass("active");
              $('.product-divTableRow').show();
          });

        });

Answer 1

您可以这样做：

 $('.table-anchor').on('click', function(e){
    e.preventDefault();
    $('a.table-anchor').removeClass('active');
    $(this).addClass("active");
    var foodToShow = $(this).attr('data-page');
    $('.product-divTableRow').hide();
    $('#' + foodToShow).show();
});
$('#food-product-all').click(function (e) {
    e.preventDefault();
    $('a.table-anchor').removeClass('active');
    $(this).addClass('active');
    $('.product-divTableRow').show();
});

只需确保将div的锚和id上的数据页保持不变

基于jQuery的菜单隐藏显示div

1 个答案: