jQuery make li主動顯示div內容

我有一個ul導航。當點擊「Resources」li並使「Resources」激活時，我需要顯示div內容。然後當div內容被點擊關閉時，隱藏div內容並使li不活躍。我不知道該如何去做，所以任何見解都會有所幫助。jQuery make li主動顯示div內容

點擊此立項目，使活躍：

<li><a href="">Resources</a></li>

顯示這個div內容

<div id="pdftab">Some content</div>

非常感謝

來源

2012-02-13 Andrea

是否'li'有一個'id'呢？ li元素和div的順序有什麼關係？你能提供一個[JS小提琴演示]（http://jsfiddle.net/），顯示你的（代表性）加價的大部分？ – 2012-02-13 18:30:31

li沒有id。在這個特定的頁面上只有2個lis。一個去外部鏈接。「資源」李將是展示div內容的唯一里程碑。 – Andrea 2012-02-13 18:34:04

沒有讓你的網頁標記的知識，我只能給你一個暗示。像這樣的東西會爲你工作。

$('li a').click(function(){ 
    $('#pdftab').show(); 
    $(this).parent().addClass('active'); 
    return false; 
}); 

$('#pdftab').click(function(){ 
    $(this).hide(); 
    $('li').removeClass('active'); 
});

定義活動類樣式

.active{ 
    //add required styles 
}

您可以使用addClass/removeClass從DOM元素添加/刪除類。在jQuery對象上調用.parent()獲取父元素。

更新：基於

在您的標記從

$('#navlist li:eq(1) a').click(function(){ 
    $('#pdftab').show() 
       .animate({left: '+=340px'}, 1200); 
    $(this).parent().addClass('resourceactive'); 
    return false; 
}); 

$('#pdftab').click(function(){ 
    $(this).hide(); 
    $('#navlist li:eq(1)').removeClass('resourceactive'); 
});

來源

2012-02-13 18:31:31 ShankarSangoli

我可以看到實心的白色箭頭。 – ShankarSangoli 2012-02-13 19:02:55

檢查我編輯的答案，使用該代碼。 – ShankarSangoli 2012-02-13 19:08:45

如果在內容不存在的情況下單擊「資源」，則內容會繼續呈現動畫效果。當你點擊「資源」時是否有停止動畫的功能？ – Andrea 2012-02-13 21:24:38

jQuery make li主動顯示div內容

回答

相關問題