[英]hide href links unless they have been clicked
我有这个简单的“隐藏/显示”输入框代码,但是我想对其进行更改,以使您不会一次看到所有链接,而只会看到已单击的链接,而看不到最后一个被单击的链接,因此在开始时,仅显示链接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>
基于我对原始帖子的评论中假设选项“ 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偏移到“显示”调用中,以便单击每个链接可显示下一个,而不会隐藏第一个。 请注意,'t2'等现在只是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 />
<br />
<a href="#" id="fieldset2" class="control">link 2</a><br/>
</div>
<div class="fieldset2" id="fs2">
fieldset2: <input type="text" name="fld2"><br />
<br />
<a href="#" id="fieldset3" class="control">link 3</a><br/>
</div>
<div class="fieldset3" id="fs3">
fieldset3: <input type="text" name="fld3"><br />
<br />
<a href="#" id="fieldset4" class="control">link 4</a><br/>
</div>
<div class="fieldset4" id="fs4">
fieldset4: <input type="text" name="fld4"><br />
<br />
<a href="#" id="fieldset5" class="control">link 5</a><br/>
</div>
<div class="fieldset5" id="fs5">
fieldset5: <input type="text" name="fld5"><br />
<br />
</div>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.