簡體   English   中英

僅根據菜單列表中的選擇顯示 div n 隱藏其中的 rest

[英]Display div only as per selection from menu list n hide rest of them

我有一個菜單,當用戶從菜單列表中選擇時,它會顯示 div 和 rest 是隱藏的

HTML:

<ul>
   <li class="one">One</li>
   <li class="two">Two</li>
   <li class="three">Three</li>
</ul>

<div id="one"> Div one </div>
<div id="two"> Div two </div>
<div id="three"> Div three</div>

CSS:

div {
    display:none;
}

li {
    cursor:pointer;
}

JQuery:

$('li').click(function(){
    $('div#' + $(this).attr('class')).show().siblings().hide();
});

這不是一個措辭特別好的問題,但我想你想給所有可以顯示特定 class 的 div,並給每個 ond 一個 id:

<div class="revealPanel" id="panel1">
<!-- Content -->
</div>

<div class="revealPanel" id="panel2">
<!-- Content -->
</div>

<div class="revealPanel" id="panel3">
<!-- Content -->
</div>
<!-- etc. ... -->

你已經用 jquery-ajax 標記了這個查詢,所以我假設你知道如何在你的頁面中包含 jQuery 等等。定義一個 javascript function 並顯示所有指定的div

function ShowPanel(panelId)
{
    jQuery('.revealPanel').hide();

    if (panelId != null)
    {
        jQuery(panelId).show();
    }
}

現在只需從每個具有正確 ID 的菜單鏈接中調用 function,例如:

<a href="javascript:ShowPanel('panel1');>Show Panel 1</a>

當然我可能誤解了你的問題,即使我沒有,我也鼓勵你在你的問題中提供更多的細節——使用代碼片段來展示你是如何設計你的菜單等的。

祝你好運!

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM