当我打开新的div标签时如何自动关闭div标签

时间:2016-07-16 19:36:09

标签: jquery asp.net

我有一个GridView控件,可以在gridview控件中动态生成多个a linkdiv tags我的要求是:
如果Gridview显示超过50条记录,当我点击第一行显示锚点链接时,它会生成50 a linkdiv标记,其显示第一行div标记FirstName and LastName如果我点击任何记录,我会再次记录详细信息行a anchor链接首先自动关闭div tags并打开我点击的行的新div标记。

<asp:GridView ID="GridParent" runat="server">
     <Columns>
       <asp:TemplateField>
         <ItemTemplate>
          <table>
            <tr>
             <td>  
               Username : <%# Eval("Username") %>
               <a href="#" onclick="ShowDiv(this);">Show</a>
               <div id="div1" style='display:none;'>
                First Name: <%# Eval("FirstName") %>
                Last Name: <%# Eval("LastName") %>
               </div>
             </td>
            </tr>
          </table>
         </ItemTemplate>
       </asp:TemplateField>
     </Columns>
    </asp:GridView>

1 个答案:

答案 0 :(得分:0)

试试这个......

$('a').click(function() {
  $('.more-info').css('display', 'none');
  $(this).next().css('display', 'block');
});
.more-info {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      Username : "Username"
      <a href="javascript:void(0)">Show</a>
      <div id="div1" class="more-info">
        First Name: "FirstName" Last Name: "LastName"
      </div>
    </td>
  </tr>
  <tr>
    <td>
      Username : "Username"
      <a href="javascript:void(0)">Show</a>
      <div id="div2" class="more-info">
        First Name: "FirstName" Last Name: "LastName"
      </div>
    </td>
  </tr>
  <tr>
    <td>
      Username : "Username"
      <a href="javascript:void(0)">Show</a>
      <div id="div3" class="more-info">
        First Name: "FirstName" Last Name: "LastName"
      </div>
    </td>
  </tr>
</table>