Question

这是代码当前存在的示例：http://jsfiddle.net/rym2g/

我现在唯一要做的就是根据所做出的选择确保它是唯一可用的选择......例如：

你是谁？

吉姆
凯尔
贝基

（你选择了becky）

显示becky的表格

（你决定选择kyle而不是becky）

隐藏becky的表单并仅显示kyle的表单

希望我能够很好地解释自己。

<form>
    <ul class="form-nav">
        <li><a href="#a-1">AAA</a></li>
        <li><a href="#a-2">BBB</a></li>
    </ul>
</form>

<form class="hidden" id="a-1">
    <ul class="form-nav">
        <li><a href="#a-1-1">aaa</a></li>
        <li><a href="#a-1-2">bbb</a></li>
    </ul>
</form>

<form class="hidden" id="a-1-1">
    <p>A-1-1</p>
</form>

<form class="hidden" id="a-1-2">
    <p>A-1-2</p>
</form>

<form class="hidden" id="a-2">
    <ul class="form-nav">
        <li><a href="#a-2-1">111</a></li>
        <li><a href="#a-2-2">222</a></li>
    </ul>
</form>

<form class="hidden" id="a-2-1">
    <p>A-2-1</p>
</form>

<form class="hidden" id="a-2-2">
    <p>A-2-2</p>
</form>

和JavaScript：

$(document).on("click", "ul.form-nav a", function(event) {
    event.preventDefault();
    var id = event.target.href.replace(/^[^#]+/, "");
    console.log("Going to: " + id);
    $(id).show().focus();
});

Answer 1

有几种方法，但鉴于你正在做的事情，这是最简单的方法：

$(document).on("click", "ul.form-nav a", function(event) {
    event.preventDefault();
    var id = event.target.href.replace(/^[^#]+/, "");
    console.log("Going to: " + id);
    // Hide forms that do not have the selected id
    $('form.hidden').not(id).hide();
    // Show the appropriate form
    $(id).show().focus();
});

查看Fiddle

Answer 2

好，

我已经到达以下代码。我现在需要做的就是确保在给定用户所在的路径的情况下所有问题都可见。这样，如果用户选择不同的路径，用户可以前进或后退。

我希望我已经说清楚了。这是小提琴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>

有条件的选择应该是或

2 个答案: