单击元素不显示内容

我试图在按菜单上的相应单词时显示“早餐”，“午餐”，“晚餐”和“零食/其他”等字样。问题是它隐藏了所有的单词而没有显示任何内容。我扫描了错误，找不到任何东西，搜索网页并没有任何东西。单击元素不显示内容

这里是我的菜单HTML：

<div id="menu"> 
    <p> 
     <span id="menubreakfast">Breakfasts | </span> 
     <span id="menulunch">Lunches | </span> 
     <span id="menudinner">Dinners | </span> 
     <span id="menusnack">Snacks/Other</span> 
    </p> 
</div>

这里是我的，因为我想显示 “页面” 或词HTML：

<div id="pagebreakfast" class="page"> 
    BREAKFAST 
</div> 
<div id="pagelunch" class="page"> 
    LUNCH 
</div> 
<div id="pagedinner" class="page"> 
    DINNER 
</div> 
<div id="pagesnack" class="page"> 
    SNACKS/OTHER 
</div>

这里是我的jQuery：

$(document).ready(function() { 
    $('#menubreakfast').click(function(){ 
     $('.page').hide(); 
     $('#pagebreakfast').show(); 
    }); 
    $('#menulunch').click(function(){ 
     $('.page').hide(); 
     $('#pagelunch').show(); 
    }); 
    $('#menudinner').click(function(){ 
     $('.page').hide(); 
     $('#pagedinner').show(); 
    }); 
    $('#menusnack').click(function(){ 
     $('.page').hide(); 
     $('#pagesnack').show(); 
    }); 
});

来源

2015-12-22 Jason Castillo

你试过做的div的ID？ – 2015-12-22 01:09:02

好的下一次请检查一下简单的代码编辑器，如JSFiddle。 [这里]（https://jsfiddle.net/abogal6274/2d8tohzw/4/）是。你的代码实际上工作。 – 2015-12-22 01:12:06

像“pagedinner”和“pagesnack”，是的。 –

简单使它使用类和数据属性

<p> 
    <span class="selectDivToShow" data-divToShow="pagebreakfast" id="menubreakfast">Breakfasts | </span> 
    <span class="selectDivToShow" data-divToShow="pagelunch" id="menulunch">Lunches | </span> 
    <span class="selectDivToShow" data-divToShow="pagedinner" id="menudinner">Dinners | </span> 
    <span class="selectDivToShow" data-divToShow="pagesnack" id="menusnack">Snacks/Other</span> 
</p>

和JS使用

$(document).ready(function(){ 
    $('.selectDivToShow').on('click' , function(){ 
    var DivToShow = $(this).attr('data-divToShow'); 
    $('.page').not('#'+DivToShow).hide(); 
    $('#'+DivToShow).slideToggle(); 
    }); 
});

来源

2015-12-22 01:14:50

@JasonCastillo如果你不需要slideToggle，并且必须是其中一个div可见，你可以使用slideDown（）;而不是slideToggle（）; –

单击元素不显示内容

回答

相关问题