切換DIV

我有HTML這樣的：切換DIV

<div id="navigation"> 
    <ul>...</ul> 
</div> 
<div id="header-search"> 
    <input id="search-input" type="text" /> 
</div>

當輸入外地的重點是，我需要它來隱藏「導航」分區，然後讓它重新出現在文本字段沒有更專注。

我已經嘗試了多次，通過CSS來完成這將比Javascript更容易，但沒有成功。淡入淡出效果也不錯。

任何幫助表示讚賞。

來源

2011-04-20 Sean

<script type="text/javascript"> 
function showNav(show) { 
    if (show) { 
    document.getElementById('navigation').style.display = ''; 
    } else { 
    document.getElementById('navigation').style.display = 'none'; 
    } 
} 
</script> 
<div id="header-search"> 
    <input id="search-input" type="text" onblur="showNav(true)" onfocus="showNav(false)"/> 
</div>

來源

2011-04-20 02:01:22 tjdett

這可以用jquery，javascript的超集來完成。你可以瞭解它（並下載.js文件）在http://jquery.com

，或者你可以用這樣的「直」的JavaScript做：

<head> 
    <title></title> 

    <script type="text/javascript"> 
     function hideNav() { 
      var nav = document.getElementById("navigation"); 
      nav.style.display = "none"; 
     } 

     function showNav() { 
      var nav = document.getElementById("navigation"); 
      nav.style.display = ""; 
     } 

    </script> 
</head> 
<body> 
<div id="navigation"> 
    <ul><li>something</li><li>something else</li></ul> 
</div> 
<div id="header-search"> 
    <input id="search-input" type="text" onfocus="hideNav();" onblur="showNav();" /> 
</div> 
</body> 
</html>

你的淡入淡出效果和操作這些和其他DOM對象得到用jQuery輕鬆了很多，但是這將您的評論，過渡過於「活潑」後讓你感動現在...

編輯我認爲這個報價：

<div id="container" style="width:150px;height:150px;"> 
<div id="navigation"> 
    <ul><li>something</li><li>something else</li></ul> 
</div></div>

通過將導航div包裝在固定大小的外部div中，當導航div變爲隱藏時，頁面上的其他元素不會「跳過」。不會給你褪色，但確實提供了一個更清晰的用戶體驗。當然，你的里程可能會有所不同。至於爲什麼jQuery沒有工作，我不確定沒有更多的你嘗試。

來源

2011-04-20 02:18:23

所以使用jQuery的.fadeToggle： '<腳本類型= 「文/ JavaScript的」> \t $（「＃搜索輸入」）點擊（函數（）{ \t $（「＃導航」）。 fadeToggle（「slow」，「linear」）; \t}）; ' ...什麼也沒有發生。我相信它與它是一個輸入字段並專注於而不是僅僅點擊有關。感謝您的快速回復。直接的JavaScript的作品很好，它似乎太「活潑」，我想要它做。 – Sean 2011-04-20 02:46:30

回答

相關問題