我有一个菜单。它是组成菜单项的一组锚定链接。单击菜单项时,它们显示特定的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();
});
});
答案 0 :(得分: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上的数据页保持不变