Question

我想尝试早餐＆＃34;，＆＃34;午餐＆＃34;，＆＃34;晚餐＆＃34;和＆＃34;零食/其他＆＃34;当我按下菜单上的相应单词时显示。问题是它隐藏了所有单词而没有显示任何内容。我扫描了虫子，找不到任何东西，在网上搜索，什么都没有。

这是我的菜单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>

这是＆＃34;页面＆＃34;的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();
    });
});

Answer 1

使用类和数据属性

简单

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

单击元素不显示内容

1 个答案: