¿Cómo puedo cambiar el css de jquery ui tabs. Puede u plz me dan el ejemplo. Quiero cambiar el css de las pestañas. ¿cómo puedo hacer esto.

HTML

<ul class='tabs'>
    <li><a href='#tab1'>Tab 1</a></li>
    <li><a href='#tab2'>Tab 2</a></li>
    <li><a href='#tab3'>Tab 3</a></li>
  </ul>
  <div id='tab1'>
    <p>Hi, this is the first tab.</p>
  </div>
  <div id='tab2'>
    <p>This is the 2nd tab.</p>
  </div>
  <div id='tab3'>
    <p>And this is the 3rd tab.</p>
  </div>
  • es esta tercera parte de jquery. dónde está html
InformationsquelleAutor user3149053 | 2014-01-16

4 Comentarios

  1. 3

    Como este

    demo

    css

    .nav-tabs {
    border-bottom: 1px solid #DDDDDD;
    }
    .nav-tabs > li {
    float: left;
    margin-bottom: -1px;
    }
    .nav-tabs > li > a {
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 4px 4px 0 0;
    line-height: 1.42857;
    margin-right: 2px;
    }
    .nav-tabs > li > a:hover {
    border-color: #EEEEEE #EEEEEE #DDDDDD;
    }
    .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: #FFFFFF;
    border-color: #DDDDDD #DDDDDD rgba(0, 0, 0, 0);
    border-image: none;
    border-style: solid;
    border-width: 1px;
    color: #555555;
    cursor: default;
    }
    .nav-tabs.nav-justified {
    border-bottom: 0 none;
    width: 100%;
    }
    .nav-tabs.nav-justified > li {
    float: none;
    }
    .nav-tabs.nav-justified > li > a {
    margin-bottom: 5px;
    text-align: center;
    }
    .nav-tabs.nav-justified > .dropdown .dropdown-menu {
    left: auto;
    top: auto;
    }

    html

       <ul class="nav nav-tabs" id="myTab">
    <li class="active"><a href='#tab1'>Tab 1</a></li>
    <li><a href='#tab2'>Tab 2</a></li>
    <li><a href='#tab3'>Tab 3</a></li>
    </ul>
    <div id='content' class="tab-content">
    <div class="tab-pane active" id="tab1">
    <p>Hi, this is the first tab.</p>
    </div>
    <div class="tab-pane" id="tab2">
    <p>This is the 2nd tab.</p>
    </div>
    <div class="tab-pane" id="tab3">
    <p>And this is the 3rd tab.</p>
    </div>
    <div class="tab-pane" id="tab4"></div>
    </div>    

    js

    $('#myTab a').click(function (e) {
    e.preventDefault()
    $(this).tab('show')
    })
  2. 0

    La forma más sencilla es utilizar la interfaz de usuario Jquery themeroller aquí: http://jqueryui.com/themeroller/

    Esto permite que usted para crear un personalizado de interfaz de usuario de paquete con el tema que te gustaría que, ya sea uno de los enlatado, o uno personalizado.

    Esto afectará a todos los de su interfaz de usuario Jquery módulos, incluyendo las pestañas.

    Dado a tu pregunta, siento que este sería el mejor método para usted mismo, de lo contrario se tendría una idea bastante clara de donde están las etiquetas CSS en vivo.

    En particular, usted debe buscar en el Encabezado y la Barra de herramientas y los tres elementos seleccionables si estás rodando por su propia cuenta.

  3. 0

    sólo inspeccione el elemento, en devloper herramientas de copiar los estilos css.. y lugar y cambiar los estilos con importantes o dar más la especificidad de la

    como este

     ui-tabs-nav {
    background-color: #222 !important; /*To overwrite jquery-ui.css*/
    height: 30px;                        /*To stop nav block scaling of tab size*/
    }

    Demo

  4. 0

    Jquery ui tabs o cualquier otra cosa, si usted necesita para reemplazar los estilos css, usted debe probar las páginas en Firefox e instalar el plugin Firebug. Por lo tanto, sólo tienes que seleccionar los elementos HTML que desea personalizar para identificar los estilos que se aplican a ellos. A continuación, puede añadir directamente a la ventana de Firebug las nuevas reglas css que se aplican automáticamente a los elementos correspondientes. Cuando esté hecho, sólo tienes que copiar las modificaciones en el archivo css y mostrar su página de nuevo para confirmar que todo está bien. Finalmente, usted puede probar la página en otros navegadores. Yo diría que esta es la forma más eficiente y fácil para trabajar en los estilos css.

Dejar respuesta

Please enter your comment!
Please enter your name here