單擊鏈接時顯示/隱藏div

我試圖在單擊鏈接時顯示並隱藏div。我得到了正確顯示的div，但我希望該div可以消失，當我點擊另一個。這是我目前的代碼。單擊鏈接時顯示/隱藏div

<script type="text/javascript"> 
      $(function() { 
       $('#attach_silver').click(function() { 
        $('#sec_silver').show(); 
        return false; 
       });   
      }); 

      $(function() { 
       $('#attach_gold').click(function() { 
        $('#sec_gold').show(); 
        return false; 
       });   
      }); 

      $(function() { 
       $('#attach_platinum').click(function() { 
        $('#sec_platinum').show(); 
        return false; 
       });   
      }); 
     </script> 

<a href="#" id="attach_silver">Silver</a> 
    <a href="#" id="attach_gold">Gold</a> 
    <a href="#" id="attach_platinum">Platinum</a> 

<div id="sec_silver" style="display: none;"> 
     Hello world!! Silver    
    </div> 

    <div id="sec_gold" style="display: none;"> 
     Hello world!! Gold    
    </div> 

    <div id="sec_platinum" style="display: none;"> 
     Hello world!! Platinum    
    </div>

來源

2013-10-24 user2916637

，什麼是阻止你正是這樣做？另外，您實際上不需要三個'document.ready'事件處理程序，只需要一個，並將在'document.ready'上運行的所有代碼放入該事件處理程序中。 – Jasper

嘗試添加類

<div id="sec_silver" style="display: none;" class="divclass"> 
    Hello world!! Silver    
</div> 

<div id="sec_gold" style="display: none;" class="divclass"> 
    Hello world!! Gold    
</div> 

<div id="sec_platinum" style="display: none;" class="divclass"> 
    Hello world!! Platinum    
</div>

這個代碼的jQuery

 $(function() { 
       $('#attach_silver').click(function() { 
        $('.divclass').hide(); 
        $('#sec_silver').show(); 
        return false; 
       });   
      }); 

      $(function() { 
       $('#attach_gold').click(function() { 
        $('.divclass').hide(); 
        $('#sec_gold').show(); 
        return false; 
       });   
      }); 

      $(function() { 
       $('#attach_platinum').click(function() { 
        $('.divclass').hide(); 
        $('#sec_platinum').show(); 
        return false; 
       });   
      });

在此模式後，你躲上的click事件的所有DIV，並顯示DIV你想要

來源

2013-10-24 16:10:00

您的點擊事件當前顯示相關的div，您只需要它們隱藏其他div。

來源

2013-10-24 16:10:18 hiattp

使用^ attribute-starts with selector

$('div[id^="sec_"]').hide(); // will hide all the div with id starting with sec_

你的代碼變得

$(function() { 
    $('#attach_silver').click(function() { 
     $('div[id^="sec_"]').hide();// add here 
     $('#sec_silver').show(); 
     return false; 
    }); 
    $('#attach_gold').click(function() { 
     $('div[id^="sec_"]').hide();// add here 
     $('#sec_gold').show(); 
     return false; 
    }); 
    $('#attach_platinum').click(function() { 
     $('div[id^="sec_"]').hide();// add here 
     $('#sec_platinum').show(); 
     return false; 
    }); 
});

來源

2013-10-24 16:12:11

你只是讓其他div的，你從來沒有告訴他們隱藏：

<script type="text/javascript"> 
$(function() { 
    $('#attach_silver').click(function() { 
     console.log('sliver click'); 
     $('#sec_silver').show(); 
     $('#sec_gold').hide(); 
     $('#sec_platinum').hide(); 
     return false; 
    }); 
}); 

$(function() { 
    $('#attach_gold').click(function() { 
     $('#sec_gold').show(); 
     $('#sec_silver').hide(); 
     $('#sec_platinum').hide(); 
     return false; 
    }); 
}); 

$(function() { 
    $('#attach_platinum').click(function() { 
     $('#sec_platinum').show(); 
     $('#sec_gold').hide(); 
     $('#sec_silver').hide(); 
     return false; 
    }); 
}); 
</script>

來源

2013-10-24 16:14:11

如何兩線解決方案

$('a').click(function() { 
    $('div:contains('+$(this).text()+')').show(); 
    $('div:not(:contains('+$(this).text()+'))').hide(); 
});

Live Demo

來源

2013-10-24 16:36:30 Rex

我喜歡的ID /類模式。另外，通過添加一個類，您可以刪除該內聯樣式。地址：

.divclass{ 
    display: none 
}

來源

2013-10-24 17:13:48

使用JavaScript做到這一點：

<a href="#xyz" onclick="hideDiv();">Hide Div</a>

function hideDiv() 
{ 
document.getElementById('myContainerDiv').style.display = "none"; 
}

來源

2015-07-28 10:09:20 Zoran777

單擊鏈接時顯示/隱藏div

回答

相關問題