[英]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.