使所有的HTML組件消失，只顯示背景圖片

我想在我的網站中實現一個奇特的功能。我在我的網站上有一個很好的背景圖片，在它的頂部有HTML組件。我想在背景圖片中的某處放置一個鏈接，以便當用戶單擊該鏈接時，所有HTML元素消失，並且用戶可以查看完整圖像。此功能可以切換。任何人都可以告訴我，我可以如何實現這與jQuery？使所有的HTML組件消失，只顯示背景圖片

來源

2011-08-12 rookieRailer

讓隱藏所有子元素的CSS類：

.hideall * { display: none; }

現在你可以添加類的身體隱藏的一切，並刪除類顯示再次一切：

$(function(){ 
    $('#hidelink').click(function(e){ 
    e.preventDefault(); 
    $('body').addClass('hideall'); 
    }); 
    $('body')click(function(){ 
    $('body').removeClass('hideall'); 
    }); 
});

這種方法的優點是它不會通過在元素上設置diplay樣式來隱藏佈局，並且在顯示內容時它不會使應該保留的內容可見隱藏。

來源

2011-08-12 21:11:02 Guffa

非常感謝。我可以使它變得有點花哨，並使我的HTML元素以某種特定的方式消失，如淡入淡出或散開等。 – rookieRailer

@rookieRailer：要求內容位於可應用動畫的元素中。基本上你會在頁面上的容器中放入'class =「hidecontainer」''，然後你可以像'$（'。hidecontainer'）。fadeOut（）'和'$（'。hidecontainer'）一樣使用動畫。 fadeIn（）'隱藏並顯示它們。 – Guffa

非常感謝。我應該能夠很容易地採用這一點，因爲我的CSS設計得非常好，並且採用了分層的方式。謝謝。 – rookieRailer

你可以很容易地隱藏一切：

$('body > *').hide();

雖然這也將隱藏你的肘杆。您可能希望將所有可隱藏的元素放入容器中（如div）並切換其可見性。

來源

2011-08-12 21:00:25 coreyward

非常感謝:)。 – rookieRailer

你可以做這樣的事情：

$('.show_bg').click(function() { 
    $('body > *').toggle(); 
    $(this).show(); 
    return false; 
});

jsFiddle Example。

來源

2011-08-12 21:00:30

@rookieRailer沒問題，請務必接受正確答案以解決問題。 –

除了用於切換此功能的按鈕外，您需要將所有要切換到包裝器div的元素進行換行。

<body> 
    <div id='wrapper'>sdfsdf 
     <!-- All your content --> 
    </div> 
    <button name='toggle_bg'>Toggle background image</button> 
</body> 
<script> 
$("button[name='toggle_bg']").click(function(){ 
    $("div#wrapper").toggle(); 
}); 
</script>

來源

2011-08-12 21:03:22

爲什麼用'

任何一個都可以工作，但在這種情況下，是的，id可能在語義上是正確的。我經常在表單中使用

非常感謝:)。 – rookieRailer

使所有的HTML組件消失，只顯示背景圖片

回答

相關問題