[英]Show / Hide DIV content block using Javascript
以下是我用來在頁面上顯示/隱藏div塊的完整代碼。 當前,當我單擊特定的文本標題時,它正在顯示該標題的塊內容。 然后,當我單擊另一個文本標題時,它將顯示該標題的另一個塊內容,但不會關閉先前打開的塊。 每當我單擊另一個標題時,我都想關閉打開的塊。 請幫我。
function viewdetail(divno)
{
if(document.getElementById("div_com"+ divno).style.display=="block")
{
document.getElementById("div_com"+ divno).style.display="none";
document.getElementById("a_title"+ divno).title="Click to view details";
}
else
{
document.getElementById("div_com"+ divno).style.display="block";
document.getElementById("a_title"+ divno).title="Click to hide details";
}
return true;
}
<table>
<?php
$int_cnt=1;
while(!$rs_list->eof())
{
?>
<tr>
<td>
<a name="a<?php print($int_cnt)?>"></a>
<table>
<tr>
<td><a href="#a<?php print($int_cnt)?>" id="a_title<?php print($int_cnt)?>" onClick="return viewdetail(<?php print($int_cnt)?>);"><?php print($rs_list->fields("title"));?></a></td>
</tr>
<tr>
<td>
<div align="justify" id="div_com<?php print($int_cnt)?>" style="display:none"><table><tr><td>Text will display here</td></tr></table></div>
</td>
</tr>
</table>
</td>
</tr>
<?php
$rs_list->movenext();
$int_cnt=$int_cnt+1;
}
?>
</table>
您可能想嘗試使用一個類來跟蹤當前打開了哪個div,然后使用該類來查找先前打開的div並將其關閉。
您可以在http://caniuse.com/#feat=getelementsbyclassname和https://developer.mozilla.org/zh-CN/docs/Web/API/document.getElementsByClassName中看到,Javascript在現代瀏覽器中支持getElementByClassName
。
因此,也許將函數重寫為:
function viewdetail(divno)
{
if(document.getElementsByClassName("last-opened"))
{
document.getElementsByClassName("last-opened").style.display="none";
document.getElementsByClassName("last-opened").title="Click to view details";
}
if(document.getElementById("div_com"+ divno).style.display=="block")
{
document.getElementById("div_com"+ divno).style.display="none";
document.getElementById("a_title"+ divno).title="Click to view details";
}
else
{
document.getElementById("div_com"+ divno).style.display="block";
document.getElementById("a_title"+ divno).title="Click to hide details";
document.getElementById("a_title"+ divno).className = "last-opened";
// Or this next line if you want to keep previous classes there.
// document.getElementById("a_title"+ divno).className = document.getElementById("a_title"+ divno).className + "last-opened";
}
return true;
}
我沒有測試它,但是我認為那是可行的。
函數中的邏輯僅處理最后單擊的div。 因此,您需要A,像其他人一樣進行總結並關閉所有B,將divno存儲在變量中,以便您知道一個巫婆先前已打開,現在應該關閉C,使用JQuery
注意:使用jquery給您的div提供class屬性,該屬性對於所有div都是相同的,並使用CSS使其隱藏。
HTML(示例):
<table>
<tr>
<td><a href="#" class="myLink" id="1">this is 1</a>
</td>
</tr>
<tr>
<td>
<div align="justify" id="div_dom1" class="myClass">
<table>
<tr>
<td>Text will display here for 1</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td><a href="#" class="myLink" id="2">this is 2</a>
</td>
</tr>
<tr>
<td>
<div align="justify" id="div_dom2" class="myClass">
<table>
<tr>
<td>Text will display here for 2</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td><a href="#" class="myLink" id="3">this is 3</a>
</td>
</tr>
<tr>
<td>
<div align="justify" id="div_dom3" class="myClass">
<table>
<tr>
<td>Text will display here for 3</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
CSS:
.myClass{
display:none
}
JS:
$(document).ready(function () {
$(".myLink").on('click',function(){
$(".myClass").hide();
var divno = $(this).attr('id');
$("#div_dom" + divno).show();
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.