如何显示隐藏的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打开时自动隐藏

回答

相关问题