Question

如何在javascript中显示和隐藏div，同样在c＃页面加载如何根据id值调用div。对此有任何帮助？

<ul>
<li><a href="#cat1">cat1</a></li>
<li><a href="#cat2">cat2</a></li>
<li><a href="#cat3">cat3</a></li>
</ul>

<div id="cat1">
<asp:UpdatePanel>
<asp:Panel>
<asp:ListView>
</asp:ListView>
</asp:Panel>
</asp:UpdatePanel>
</div>

<div id="cat2">
<asp:UpdatePanel>
<asp:Panel>
<asp:ListView>
</asp:ListView>
</asp:Panel>
</asp:UpdatePanel>
</div>

<div id="cat3">
<asp:UpdatePanel>
<asp:Panel>
<asp:ListView>
</asp:ListView>
</asp:Panel>
</asp:UpdatePanel>
</div>

Answer 1

要在C＃代码隐藏中引用div，您需要向div添加runat="server"属性。然后，您可以使用Page_Load方法中的ID引用它。您还应该为div设置ClientIDMode="Static"，以修复div的ID，以便您可以在Javascript中引用它。请注意静态ID的ID冲突。

使用严格的Javascript，你可以像这样隐藏div：

var elem = document.getElementById('cat1');
elem.style.display = 'none';

你可以这样展示div：

var elem = document.getElementById('cat1');
elem.style.display = 'block';

JQuery可能比getElementById方法更好：

$('#cat1').hide();

和

$('#cat1').show();

Answer 2

function showDiv()
{
  // This is to show the div
   document.getElementById('divId').style.display = 'block';
}

function hideDiv()
{
 // This is to hide the div
   document.getElementById('divId').style.display = 'none';
}

如果div具有runat属性，代码将不支持..

希望这会对你有帮助..

javascript show hide div

2 个答案: