單擊元素不顯示內容

我試圖在按菜單上的相應單詞時顯示「早餐」，「午餐」，「晚餐」和「零食/其他」等字樣。問題是它隱藏了所有的單詞而沒有顯示任何內容。我掃描了錯誤，找不到任何東西，搜索網頁並沒有任何東西。單擊元素不顯示內容

這裏是我的菜單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（）; –

單擊元素不顯示內容

回答

相關問題