Inquiridor
Controle de abas

Pergunta
-
Olá pessoal,
Fiz duas abas usando CSS que peguei na internet. Ficou show, muito bom o código. Mas estou com um pequeno problema que quanto ao DataBind do meu DataGrid. Quando navego entre as páginas do DataGrid, por exemplo, a aba volta para o index padrão. Como faço para manter na mesma aba? Abaixo segue o código aspx e css.
Página aspx:
<%@ Page Title="" Language="VB" MasterPageFile="~/administrador/MasterPage.master" AutoEventWireup="false" CodeFile="cadPaises.aspx.vb" Inherits="administrador_cadPaises" %> <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"> </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> <div style="text-align:left; color:#08C; font-size:12px; margin-bottom:10px;"><asp:Label ID="LbMensagem" runat="server" Text="Label"></asp:Label></div> <div> <ul class="tabs"> <li> <input type="radio" checked name="tabs" id="tab1"> <label for="tab1">CADASTROS</label> <div id="tab-content1" class="tab-content animated fadeIn"> <div> <asp:ImageButton ID="BtnSalvar" runat="server" ImageUrl="~/imagens/Save_24x24.png" /> <asp:ImageButton ID="BtnCancelar" runat="server" ImageUrl="~/imagens/Cancel_24x24.png" /> <asp:ImageButton ID="BtnExcluir" runat="server" ImageUrl="~/imagens/Delete_24x24.png" /> </div> <div><asp:HiddenField ID="hfCodigo" runat="server" /></div> <div>Nome:</div> <div><asp:TextBox ID="TxtNome" runat="server" MaxLength="100" Width="90%"></asp:TextBox></div> </div> </li> <li> <input type="radio" name="tabs" id="tab2"> <label for="tab2">CONSULTAS</label> <div id="tab-content2" class="tab-content animated fadeIn"> <div></div> <div><asp:Label ID="LbRegistros" runat="server" Text="Label"></asp:Label></div> <div> <asp:DataGrid ID="DataGrid1" runat="server" AutoGenerateColumns="False" CssClass="grid" GridLines="None"> <AlternatingItemStyle CssClass="grid alternate" /> <Columns> <asp:BoundColumn DataField="Pais_ID" HeaderText="CÓDIGO" Visible="False"> <HeaderStyle Width="0%" /> </asp:BoundColumn> <asp:BoundColumn HeaderText="NOME DO PAÍS" DataField="Pais_Nome"> <HeaderStyle Width="90%" /> </asp:BoundColumn> <asp:ButtonColumn HeaderText="EDITA" Text="<img src="../imagens/Edit_16x16.png" border="0">" CommandName="Edit"> <HeaderStyle Font-Bold="False" Font-Italic="False" Font-Overline="False" Font-Strikeout="False" Font-Underline="False" HorizontalAlign="Center" Width="5%" /> <ItemStyle Font-Bold="False" Font-Italic="False" Font-Overline="False" Font-Strikeout="False" Font-Underline="False" HorizontalAlign="Center" /> </asp:ButtonColumn> <asp:ButtonColumn HeaderText="EXCLUI" Text="<img src="../imagens/Delete_16x16.png" border="0">" CommandName="Delete"> <HeaderStyle Font-Bold="False" Font-Italic="False" Font-Overline="False" Font-Strikeout="False" Font-Underline="False" HorizontalAlign="Center" Width="5%" /> <ItemStyle Font-Bold="False" Font-Italic="False" Font-Overline="False" Font-Strikeout="False" Font-Underline="False" HorizontalAlign="Center" /> </asp:ButtonColumn> </Columns> <HeaderStyle CssClass="grid header" /> <PagerStyle CssClass="grid page" /> </asp:DataGrid></div> </div> </li> </ul> </div> </asp:Content>
Código CSS:
body, html { /*height: 100%;*/ margin: 0; -webkit-font-smoothing: antialiased; font-weight: 12px; /*background: #aadfeb;*/ text-align: center; font-family: Tahoma, Verdana, helvetica; } .tabs input[type=radio] { ; top: -9999px; left: -9999px; } .tabs { /*width: 650px;*/ width:100%; float: none; list-style: none; ; padding: 0; margin: 0px auto; top: 0px; left: 0px; } .tabs li { float: left; } .tabs label { display: block; padding: 5px 10px; /*border-radius: 2px 2px 0 0;*/ color: #08C; font-size: 12px; font-weight: normal; font-family: Tahoma, Verdana, 'Lily Script One', helveti; background: rgba(255,255,255,0.2); cursor: pointer; ; /*top: 3px;*/ -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; -moz-border-radius:7px 7px 0px 0px; /* Firefox, etc */ -khtml-border-radius:7px 7px 0px 0px; /* Konqueror, etc */ -webkit-border-radius:7px 7px 0px 0px; /* Safari, Google Chrome, etc */ border-radius: 7px 7px 0px 0px; /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */ border-style:solid; border-width:1px; border-color:Gray; } .tabs label:hover { background: rgba(255,255,255,0.5); top: 0; -moz-border-radius:7px 7px 0px 0px; /* Firefox, etc */ -khtml-border-radius:7px 7px 0px 0px; /* Konqueror, etc */ -webkit-border-radius:7px 7px 0px 0px; /* Safari, Google Chrome, etc */ border-radius: 7px 7px 0px 0px; /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */ } [id^=tab]:checked + label { background: #08C; color: white; top: 0; } [id^=tab]:checked ~ [id^=tab-content] { display: block; } .tab-content { z-index: 2; display: none; text-align: left; width: 100%; font-size: 12px; line-height: 140%; padding-top: 10px; /*background: #08C;*/ background:white; padding: 15px; /*color: white;*/ ; top: 33px; left: 0; box-sizing: border-box; -webkit-animation-duration: 0.5s; -o-animation-duration: 0.5s; -moz-animation-duration: 0.5s; animation-duration: 0.5s; -moz-border-radius:7px 7px 0px 0px; /* Firefox, etc */ -khtml-border-radius:7px 7px 0px 0px; /* Konqueror, etc */ -webkit-border-radius:7px 7px 0px 0px; /* Safari, Google Chrome, etc */ border-radius: 7px 0px 7px 0px; /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */ border-style:solid; border-width:1px; border-color:Gray; }
Grato,
Ilano