在隐藏其他 div 时切换 div
Posted
技术标签:
【中文标题】在隐藏其他 div 时切换 div【英文标题】：toggle div while hiding other divs 【发布时间】：2012-09-17 05:40:03 【问题描述】：我在左侧有一个侧导航，可以进行不同类型的手术。它们都在 ul 中。
当您点击某项手术 (ul li) 时，右侧会出现一个 div，显示该特定手术的常见问题解答。单击 ul 中的另一个链接将隐藏当前打开的 div 并显示您刚刚单击的那个。
我已经做到了，但是当我再次单击相同的 ul li 链接时，我还想切换 FAQ div 的可见性。
<html>
<head>
<style>
#popup div display:none;
#popup div.show display:block;
ul#links li cursor:pointer;
</style>
</head>
<body>
<div class="sidenav">
<ul id="links">
<li id="armlift">Arm Lift</li>
<li id="liposuction">Liposuction</li>
<li id="tummytuck">Tummy Tuck</li>
<li id="postgastric">Post-Gastric Bypass Surgery</li>
</ul>
</div>
<div id="popup">
<div id="a_armlift">
<span class="faq_header">Arm Lift</span>
<p class="treatment_question">What is a an Arm Lift?</p>
<div class="treatment_answer">This surgery removes excess...</div>
<p class="treatment_question">What should I know?</p>
<div class="treatment_answer">An incision is made...</div>
</div>
<div id="a_liposuction">
<span class="faq_header">Liposuction Lift</span>
<p class="treatment_question">What is a Liposuction?</p>
<div class="treatment_answer">Liposuction is the removal...</div>
<p class="treatment_question">What should I know?</p>
<div class="treatment_answer">Ideal candidates for...</div>
</div>
<div id="a_tummytuck">
<span class="faq_header">Tummy Tuck</span>
<p class="treatment_question">What is a Tummy Tuck?</p>
<div class="treatment_answer">A tummy tuck tightens...</div>
<p class="treatment_question">What is a Mini Tummy Tuck?</p>
<div class="treatment_answer">A mini-tuck is a...</div>
</div>
<div id="a_postgastric">
<span class="faq_header">Post-Gastric Bypass Surgery</span>
<p class="treatment_question">What is a Post-Gastric Bypass Surgery?</p>
<div class="treatment_answer">Gastric bypass surgery removes...</div>
<p class="treatment_question">What should I know?</p>
<div class="treatment_answer">Each patient has...</div>
</div>
</div>
<script type="text/javascript">
var links_ul = document.getElementById('links');
for (var i = 0; i < links_ul.children.length; i++)
links_ul.children[i].onclick = function(ev)
s = document.getElementById('a_' + this.id);
popup = document.getElementsByClassName('show');
for (var j = 0; j < popup.length; j++)
popup[j].className = '';
s.className = 'show';
;
</script>
</body>
</html>
【问题讨论】：
我不认为这是相关的，但您缺少popup 的结束 </div> 标记
你是对的，我在将我的代码复制并粘贴到 *** 时一定错过了它。谢谢！
【参考方案1】：
我建议您考虑以不同的方式执行此操作。有很多插件可以做这种事情。
但是，这是您问题的答案：http://jsfiddle.net/6Vku8/1/
for (var i = 0; i < links_ul.children.length; i++)
links_ul.children[i].onclick = function(ev)
s = document.getElementById('a_' + this.id);
popup = document.getElementsByClassName('show');
var shown = s.className == 'show';
for (var j = 0; j < popup.length; j++)
popup[j].className = '';
s.className = shown ? '' : 'show';
;
在隐藏所有 div 之前，您需要确定 div 是否“显示”。
【讨论】：
谢谢，太好了。它在 jsfiddle 中运行良好。这正是我一直在寻找的。但是，当我粘贴代码时，它在我的 html 中不起作用......我之前在研究其他 jsfiddles 时遇到过这个问题。将javascript粘贴到任何地方是否有特殊的“技巧”？现在，我把它放在以上是关于在隐藏其他 div 时切换 div的主要内容，如果未能解决你的问题，请参考以下文章