我有这个相当广泛的引用形式......现在我需要做的就是添加一些代码,让问题保持可见,而不是在做出选择后隐藏它。
即 用户将处于业务路径(所有表1,11,12,13,14,15,16),驻地路径(所有表2,21,22,23,24,25,26或a我有一个列表路径(所有table3)。
这是我的小提琴 http://jsfiddle.net/XuVUb/
代码片段:
<script type="text/javascript">
function show_table(id){
document.getElementById('table1').style.display='none';
document.getElementById('table11').style.display='none';
document.getElementById('table12').style.display='none';
document.getElementById('table13').style.display='none';
document.getElementById('table14').style.display='none';
document.getElementById('table15').style.display='none';
document.getElementById('table16').style.display='none';
document.getElementById('table2').style.display='none';
document.getElementById('table21').style.display='none';
document.getElementById('table22').style.display='none';
document.getElementById('table23').style.display='none';
document.getElementById('table24').style.display='none';
document.getElementById('table25').style.display='none';
document.getElementById('table26').style.display='none';
document.getElementById('table3').style.display='none';
document.getElementById('table'+id).style.display='block';
}
</script>
答案 0 :(得分:0)
我想你想要这样的东西:http://jsfiddle.net/S9bSe/
HTML:
<div class="level-1">
<p>Are you dead or alive?</p>
<ul>
<li><a href="#dead" data-level="2">Dead</a></li>
<li><a href="#alive" data-level="2">Alive</a></li>
<li><a href="#schrodingers_cat" data-level="2">Both</a></li>
</ul>
<div id="dead" class="hidden level-2">
<p>Do you have physical form?</p>
<ul>
<li><a href="#corpse" data-level="3">Yes</a></li>
<li><a href="#ghost" data-level="3">No</a></li>
</ul>
<div id="corpse" class="hidden level-3">
<p>You are a corpse</p>
</div>
<div id="ghost" class="hidden level-3">
<p>You are a ghost</p>
</div>
</div>
<div id="alive" class="hidden level-2">
<p>Do you have 9 lives?</p>
<ul>
<li><a href="#regular_cat" data-level="3">Yes</a></li>
<li><a href="#maybe_human" data-level="3">No</a></li>
</ul>
<div id="regular_cat" class="hidden level-3">
<p>You are a cat</p>
</div>
<div id="maybe_human" class="hidden level-3">
<p>You might be human</p>
</div>
</div>
<div id="schrodingers_cat" class="hidden level-2">
<p>You are a cat and you belong to Schrödinger</p>
</div>
</div>
CSS
.hidden {
display: none;
}
JavaScript(使用jQuery)
$("a").on("click", function () {
var id = $(this).attr("href");
var level = $(this).data("level");
$(".level-" + level).addClass("hidden");
$(id).removeClass("hidden");
});
请原谅我介绍jQuery,但它至少应该说清楚如何解决问题。