如何顯示隱藏的DIV並在其他div打開時自動隱藏

我正在嘗試構建一個只包含一個頁面（index.html）的網站，並且裏面有divs，它基本上將用作頁面在主頁面內。我知道我們需要jQuery和/或Java來實現這一點。但我是編程新手。如何顯示隱藏的DIV並在其他div打開時自動隱藏

我需要的是，大約有8個div（換句話說，在一個單獨的html文件中有8個頁面）。我需要將這些div鏈接到導航欄導航，並且當我單擊任何導航時，（隱藏）div應該像滾降效果一樣下來。此外，如果我點擊其他導航，那麼當前打開的div應該自動消失，並且新的div應該取代它。

任何人都可以請幫助我。我對這些網站建築很陌生。如果可能的話，將我重定向到一個視頻或一些例子。先謝謝你。

來源

2014-02-28 PICKAB00

你嘗試過什麼？你有沒有找過可能爲此設計的圖書館？ – xdumaine

是的，我已經嘗試了很多東西，但沒有工作。使用庫和一些編碼在互聯網上。 – PICKAB00

你可以嘗試插件（http://www.outyear.co.uk/smint/）或簡單的把頁面內容放在單獨的div中，爲它們指定一個類名並隱藏除目標div以外的所有內容 – chepe263

你應該能夠做這樣的事情：

var divs = ["div1", "div2", "div3", "div4", "div5", "div6", "div7", "div8"]; 
var visibleDivId = null; 

function toggleVisibility(divId) { 
    if (visibleDivId === divId) { 
     visibleDivId = null; 
    } else { 
     visibleDivId = divId; 
    } 
    hideNonVisibleDivs(); 
} 

function hideNonVisibleDivs() { 
    var i, divId, div; 
    for (i = 0; i < divs.length; i++) { 
     divId = divs[i]; 
     div = document.getElementById(divId); 
     if (visibleDivId === divId) { 
      div.style.display = "block"; 
     } else { 
      div.style.display = "none"; 
     } 
    } 
}

然後，只需添加的onclick事件給你鏈接，這樣相應的div：

首先鏈接（顯示DIV2和隱藏所有其他）：

<a href="#" onClick="toggleVisibility('div2');return false;">

只要重複與其他div的鏈接格式。

來源

2014-02-28 20:02:15 fishboy

這個作品很完美：D thnx男人：D你的老闆... – PICKAB00

fishboy ...需要問你，你提供給我的代碼？無論如何，你可以添加一個過渡效果嗎？請添加您提供的相同代碼。 thanx :) – PICKAB00

Demo

導航：

<nav> 
<ul> 
<li><a href="#foo">Foo</a></li> 
<li><a href="#bar">Bar</a></li> 
</ul> 
</nav>

頁：

<main> 
<section id="foo">Foo's contents</section> 
<section id="bar">Bar's contents</section> 
</main>

CSS：

main > section { 
    display: none; 
} 
:target { 
    display: block; 
}

_{注意:target僞類在舊版瀏覽器上不起作用。}

來源

2014-02-28 19:58:43 Oriol

動畫需要的jQuery所以結構是不同的，我原來的答覆：

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
<title>jquery slideup-down</title> 
<script type='text/javascript' src='http://code.jquery.com/jquery-1.10.2.js'></script> 
<style type='text/css'> 
.targetDiv { 
display: none 
} 
</style> 
<script type='text/javascript'> 
jQuery(function() { 
    jQuery('.showSingle').click(function() { 
     var index = $(this).index(), 
      newTarget = jQuery('.targetDiv').eq(index).slideDown(); 
     jQuery('.targetDiv').not(newTarget).slideUp(); 
    }); 
}); 
</script> 
</head> 
<body> 
<a class="showSingle" target="1">Div 1</a> 
<a class="showSingle" target="2">Div 2</a> 
<a class="showSingle" target="3">Div 3</a> 
<a class="showSingle" target="4">Div 4</a> 
<a class="showSingle" target="1">Div 5</a> 
<a class="showSingle" target="2">Div 6</a> 
<a class="showSingle" target="3">Div 7</a> 
<a class="showSingle" target="4">Div 8</a> 
<div id="div1" class="targetDiv">Lorum Ipsum1</div> 
<div id="div2" class="targetDiv">Lorum Ipsum2</div> 
<div id="div3" class="targetDiv">Lorum Ipsum3</div> 
<div id="div4" class="targetDiv">Lorum Ipsum4</div> 
<div id="div1" class="targetDiv">Lorum Ipsum5</div> 
<div id="div2" class="targetDiv">Lorum Ipsum6</div> 
<div id="div3" class="targetDiv">Lorum Ipsum7</div> 
<div id="div4" class="targetDiv">Lorum Ipsum8</div> 
</body> 
</html>

來源

2014-03-05 12:21:42 fishboy

如何顯示隱藏的DIV並在其他div打開時自動隱藏

回答

相關問題