¿Cómo puedo hacer una vista con fichas en HTML?

StackOverflow https://stackoverflow.com/questions/1027663

  •  06-07-2019
  •  | 
  •  

Pregunta

Al hacer clic en Una ficha, mostrar el contenido de la ficha de A.Haga clic en la pestaña B, mostrar el contenido de la ficha B, y así sucesivamente.

¿Cuál es la más sencilla y compatible camino de la construcción de un fragmento de código HTML?

No me refiero a utilizar cualquiera de las bibliotecas de aquí, por lo que ninguno de jQuery o cualquier otras bibliotecas.

¿Fue útil?

Solución

Si desea rodar su propio control de pestaña, puede hacer algo como esto: 

<html>
  <head>
    <script type="text/javascript">

      function activateTab(pageId) {
          var tabCtrl = document.getElementById('tabCtrl');
          var pageToActivate = document.getElementById(pageId);
          for (var i = 0; i < tabCtrl.childNodes.length; i++) {
              var node = tabCtrl.childNodes[i];
              if (node.nodeType == 1) { /* Element */
                  node.style.display = (node == pageToActivate) ? 'block' : 'none';
              }
          }
      }

    </script>
  </head>
  <body>
    <ul>
      <li>
        <a href="javascript:activateTab('page1')">Tab 1</a>
      </li>
      <li>
        <a href="javascript:activateTab('page2')">Tab 2</a>
      </li>
      ...
    </ul>
    <div id="tabCtrl">
      <div id="page1" style="display: block;">Page 1</div>
      <div id="page2" style="display: none;">Page 2</div>
      ...
    </div>
  </body>
</html>

Otros consejos

Aquí hay una lista de diferentes tipos de pestañas más tutoriales sobre cómo construirlos

TabTastic es una buena guía & # 8212; es accesible y (cuando JavaScript no está disponible) falla con mucha gracia.

Si desea implementar su propia vista de pestaña, simplemente hágalo así: 

<html>
    <head>
        <style>
            .tab {
            display:none;
            }
        </style>

        <script type="text/javascript">
          function initTabView(){
            var x = document.getElementsByClassName('tab-view')
            for(var i=0; i < x.length; i++) {
              x[i].onclick = displayTab;
            }

            var prevViewedTab = null;

            function displayTab(e) {
            var idOfTabToDisplay = this.getAttribute("data-tab")

            if(prevViewedTab) {
              prevViewedTab.style.display = 'none';
            }

            var tabToDisplay = document.getElementById(idOfTabToDisplay);
              tabToDisplay.style.display = 'block';
              prevViewedTab = tabToDisplay;
            }

            var defaultTab = document.getElementsByClassName('default-tab')
              if (defaultTab.length) {
                defaultTab[0].style.display = 'block';
                prevViewedTab = defaultTab[0];
              }
          }
        </script>
    </head>

    <body>
        <ul>
            <li>
                <a data-tab="tab1" class="tab-view">Tab 1</a>
            </li>
            <li>
                <a data-tab="tab2" class="tab-view">Tab 2</a>
            </li>
            <li>
                <a data-tab="tab3" class="tab-view">Tab 3</a>
            </li>
            <li>
                <a data-tab="tab4" class="tab-view">Tab 4</a>
            </li>
        </ul>
        <div id="tabCtrl">
            <div class="tab default-tab" id="tab1">This is Tab 1</div>
            <div class="tab" id="tab2">This is Tab 2</div>
            <div class="tab" id="tab3">This is Tab 3</div>
            <div class="tab" id="tab4">This is Tab 4</div>
        </div>

        <script>
            initTabView();
        </script>
    </body>
</html>

A jsFiddle está disponible aquí .

Echa un vistazo a un ejemplo como este (cortesía de una búsqueda en Google de 'vista con fichas javascript').

Usted, evidentemente, puede usar esto con un poco de personalización, pero es instructivo para desarmar y determinar lo que está haciendo.Es, básicamente, la activación o desactivación de <div> el uso de la display el estilo y el ajuste a block o none

If " simple y compatible " son sus dos únicos criterios, sugeriría el jQuery UI Tabs plugin . Cross-browser y muy fácil de implementar.

Dependiendo de sus ambiciones, podría ser simplemente una cuestión de una lista desordenada y una cantidad de <div> s (contenido de la pestaña). Entonces, un simple JavaScript podría, por medio de getElementById() - establecer la propiedad de visualización para todos los none s: <=> para todos excepto el actual.

Alternativamente, puede echar un vistazo a esto .

Editar : no es el único que se vincula al sitio jQuery, parece :)

El widget de pestañas en jQuery UI es fácil de usar: http://jqueryui.com/demos/tabs/ .

El widget de pestañas jQuery funciona completamente en el lado del navegador: el contenido de todas las pestañas se envía en cada solicitud, o puede escribir código JavaScript que use Ajax para cargar el contenido de la pestaña dinámicamente.

Pero puede que no sea apropiado para su uso. Considere si necesita controlar las pestañas del lado del servidor (es decir, un clic en una pestaña envía una nueva solicitud de página al servidor: el servidor construye HTML que tiene la apariencia visual de las pestañas).

Si está abierto a usar JavaScript, la pestaña de jQuery es bastante agradable.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top