Desarrollando un sitio web usando Django (irrelevante, en realidad), y he estado jugando con la implementación de pestañas en lugar de una barra de navegación, ya que quiero que ciertas páginas se actualicen cuando se seleccionen sin redirigir completamente a una nueva página o actualizarla por completo. Sin embargo, para que esto sea útil, cada pestaña requeriría su propio formato de CSS, ya que cada página que se muestra es intrínsecamente diferente de las demás (digamos que hay 4 pestañas, cada pestaña mostraría una página completamente diferente, desde una imagen biblioteca a solo texto); esto es necesario ya que necesito que el banner permanezca fijo en la parte superior de la página, así como que la posición del usuario en dicha página permanezca igual una vez que se seleccione una nueva pestaña, o al menos que la página no se vuelva a cargar. Mi pregunta es, cómo se haría esto teóricamente, ya que he encontrado muy poca documentación sobre el tema, aparte de las personas que afirman "es posible" cuando se les pregunta.
<div class="wrapper"> <div class="tabs"> <div class="tab"> <input type="radio" name="css-tabs" id="tab-1" checked class="tab-switch"> <label for="tab-1" class="tab-label">Tab One</label> <div class="tab-content">sample text</div> </div>Con base en la entrada anterior, asumiría que podría listar varias entradas y modificar cada una usando el modificador id="tab-1" dentro de CSS, algo similar a #tab-1, #tab-2, #tab-3, para actualice cada selección individualmente, sin embargo, esto no parece funcionar cuando se intenta. También intenté incorporar archivos CSS separados, lo que sería el resultado óptimo; sin embargo, no parecen cargarse correctamente cuando se incorporan, y encontré poca documentación sobre la implementación de múltiples archivos CSS en la forma en que se requiere para las pestañas diferenciales.
(Alternativamente, ¿hay alguna manera de obtener este formato usando una barra de navegación, mientras que en lugar de un enlace a una página separada, muestra el cambio dentro del cuerpo, similar a una pestaña que modifica su contenedor? En última instancia, quiero que la visualización sea similar a la de una barra de navegación.)
Gracias por tu ayuda.
Puede usar múltiples div para poner su contenido en ellos. Después de eso, puede ocultar su div con display: none; .
Ahora puede, con Javascript, cambiar la visualización de uno de sus div que contiene su contenido. Puede usar document.getElementById('div-1').style.display = "initial" para mostrar una de sus pestañas y puede usar document.getElementById('div-1').style.display = "none" para ocultarlo.
Aquí hay un ejemplo que encontré en Codepen.io : Ejemplo de cambio de pestaña
function hideOtherTabs(tabList, tab, tabPrefix){ for (index = 0; index < tabList.length; index++) { if(tabPrefix+tab!=tabPrefix+tabList[index]){ $('div#'+tabPrefix+tabList[index]).hide(); } } } jQuery(document).ready( function(){ var tabPrefix = 'home_'; var tabs = ['tab1', 'tab2', 'tab3']; for (index = 0; index < tabs.length; index++) { jQuery('div#'+tabPrefix+tabs[index]).hide(); } jQuery('ul.tab_links li').click( function(){ var tabID = $(this).attr('id'); //alert(tabID); //show this tab jQuery('div#'+tabPrefix+tabID).show(); //hide others hideOtherTabs(tabs,tabID,tabPrefix); }); }); .tab_links {} .tab_links li { font-family: 'Source Sans Pro', sans-serif; cursor: pointer; list-style: none; float: left; margin-right: 3px; padding: 10px 40px; background: #B326DA; color: #ffffff; } .tab_links li:hover { background: #D746FF; } .tab_box{ min-height: 200px; width:335px; margin: 10px 0 5px 40px; border:1px dashed #B326DA; padding:10px; font-family: 'Source Sans Pro', sans-serif; color: #B326DA; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'> <ul class='tab_links'> <li id='tab1'>Tab 1</li> <li id='tab2'>Tab 2</li> <li id='tab3'>Tab 3</li> </ul> <div style='clear:both;'></div> <div class='tab_box' id='home_tab1'> Crazy world tab1 </div> <div class='tab_box' id='home_tab2'> Hello world tab2 </div> <div class='tab_box' id='home_tab3'> Bye world tab3 </div>