Javascript 隐藏href链接，除非已单击它们

我有这个简单的隐藏/显示输入框代码，但我想更改它，这样您就不会一次看到所有链接，而是只看到已单击的链接以及上次单击的链接之后的一个链接，因此在开始时只显示链接1。然后，如果单击，则只显示链接1和2，如果单击链接2，则只显示链接1、2和3，依此类推，是否有方法调整此代码以使其成为可能

<script type="text/javascript">

function show(id){ 
if(document.getElementById(id).style.display=="none")
{ 
   document.getElementById(id).style.display="block"  
} 
else{ 
       document.getElementById(id).style.display="none" 
    } 
                 } 

</script>

<a href="#null" onclick="show('t1')">Link 1</a> <input type="text" id="t1"    
 style="display:none"><BR>
<a href="#null" onclick="show('t2')">Link 2</a> <input type="text" id="t2"   
style="display:none"><BR> 
<a href="#null" onclick="show('t3')">Link 3</a> <input type="text" id="t3" 
style="display:none"><BR>
<a href="#null" onclick="show('t4')">Link 4</a> <input type="text" id="t4"   
style="display:none"><BR>
<a href="#null" onclick="show('t5')">Link 5</a> <input type="text" id="t5"    
style="display:none"><BR>

函数显示（id）{
if（document.getElementById（id.style.display==“无”）
{ 
document.getElementById（id）.style.display=“block”
} 
否则{
document.getElementById（id）.style.display=“无”
} 
} 

根据我对原始帖子的评论中的选项“a”，将代码稍微更改为：

<script type="text/javascript"> 
function show(id){ 
  if(document.getElementById(id+"-link").style.display=="none") { 
    document.getElementById(id+"-link").style.display="block";  
    document.getElementById(id+"-input").style.display="block";  
  } 
} 
</script>

<a href="#null" onclick="show('t2')">Link 1</a> <input type="text" id="t1"><BR>
<a href="#null" style="display:none" id="t2-link" onclick="show('t3')">Link 2</a> <input type="text" id="t2-input" style="display:none"><BR>  
<a href="#null" style="display:none" id="t3-link" onclick="show('t4')">Link 3</a> <input type="text" id="t3-input" style="display:none"><BR>

函数显示（id）{
if（document.getElementById（id+“-link”）.style.display==“none”）{
document.getElementById（id+“-link”）.style.display=“block”；
document.getElementById（id+“-input”）.style.display=“block”；
} 
} 

基本上，将调用中的id偏移到“show”，以便单击每个链接显示下一个链接，而不隐藏第一个链接。请注意，“t2”etc现在只是id的一部分，“show”函数必须将其展开以包括所有要显示/隐藏的元素

---

我没有费心包括一个单独的切换来显示/隐藏输入，并且我已经删除了代码来隐藏用户第二次单击时的链接，我可能是错的，但看起来您希望它在单击链接时展开和折叠

我有一个解决办法供你参考。它在单击链接时展开和折叠。此外，如果在最后一个链接展开之前单击链接，则折叠会级联

希望这有帮助

Javascript如下

$('a.control').click( function(){
    var show = this.id;
    if($('#wrapper > div.' + show).is(':hidden')) {
        $('#wrapper > div.' + show).show();
        return false;
    }
    else {
        if(show == 'fieldset1') {
            $('#wrapper > div.fieldset5').hide();
            $('#wrapper > div.fieldset4').hide();
            $('#wrapper > div.fieldset3').hide();
            $('#wrapper > div.fieldset2').hide();
            $('#wrapper > div.fieldset1').hide();
            return false;
        }
        if(show == 'fieldset2') {
            $('#wrapper > div.fieldset5').hide();
            $('#wrapper > div.fieldset4').hide();
            $('#wrapper > div.fieldset3').hide();
            $('#wrapper > div.fieldset2').hide();
            return false;
        }
        if(show == 'fieldset3') {
            $('#wrapper > div.fieldset5').hide();
            $('#wrapper > div.fieldset4').hide();
            $('#wrapper > div.fieldset3').hide();
            return false;
        }
        if(show == 'fieldset4') {
            $('#wrapper > div.fieldset5').hide();
            $('#wrapper > div.fieldset4').hide();
            return false;
        }
        if(show == 'fieldset5') {
            $('#wrapper > div.fieldset5').hide();
            return false;
        }
    }
});​

CSS如下

#wrapper {
    left: 0px;
    width: 300px;
    margin: 0 auto;
}

#wrapper > div {
    display: none;
    width: 300px;
    height: 55px;
    float: left;
}​

HTML如下

<div id="wrapper">
    <a href="#" id="fieldset1" class="control">link 1</a><br/>
    <div class="fieldset1" id="fs1">
        fieldset1: <input type="text" name="fld1"><br />
        &nbsp;<br />
        <a href="#" id="fieldset2" class="control">link 2</a><br/>
    </div>

    <div class="fieldset2" id="fs2">
        fieldset2: <input type="text" name="fld2"><br />
        &nbsp;<br />
        <a href="#" id="fieldset3" class="control">link 3</a><br/>
    </div>

    <div class="fieldset3" id="fs3">
        fieldset3: <input type="text" name="fld3"><br />
        &nbsp;<br />
        <a href="#" id="fieldset4" class="control">link 4</a><br/>
    </div>

    <div class="fieldset4" id="fs4">
        fieldset4: <input type="text" name="fld4"><br />
        &nbsp;<br />
        <a href="#" id="fieldset5" class="control">link 5</a><br/>
    </div>

    <div class="fieldset5" id="fs5">
        fieldset5: <input type="text" name="fld5"><br />
        &nbsp;<br />
    </div>
</div>​

字段集1:





字段集2:





字段集3:





字段集4:





字段集5:



​

当您说“仅显示已单击的链接”时，您的意思是a）当前用户在当前会话中单击的链接，b）当前用户在当前或上一会话中单击的链接，c）其他访问者在网站上单击的链接，还是d）其他内容，在当前会话中，您可以使用

SessionStorage

。由IE8发明，很快就得到了其他人的支持。不，如果它在当前会话中，不需要乱搞会话存储，您可以通过页面状态跟踪它。仅当覆盖多个会话时才需要会话存储。。。