ändern css von jquery ui Tabs

Wie kann ich das ändern das css von jquery ui tabs. Kann u plz mir das Beispiel. Ich möchte zum überschreiben der aktuellen css-tabs. wie kann ich dies tun.

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>
ist dieser Dritte jquery. wo ist es html

InformationsquelleAutor user3149053 | 2014-01-16

  1. 3

    Wie diese

    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')
})
    :wo ist css ?
    u kopieren kann css auf dieser Seite getbootstrap.com/javascript/#tabs

    InformationsquelleAutor Falguni Panchal

  2. 0

    Der einfachste Weg ist die Verwendung der Jquery UI themeroller hier: http://jqueryui.com/themeroller/

    Dieser ermöglicht Ihnen das erstellen einer vollständig angepasste Benutzeroberfläche-Paket mit dem Thema, das Sie möchten, entweder ein von der pre-canned, oder eine benutzerdefinierte ein.

    Wird sich dies auf alle Ihre Jquery UI Module einschließlich der Registerkarten.

    Angesichts Ihrer Frage, ich denke, dies wäre die beste Methode für sich selbst - sonst müsste man eine ziemlich klare Vorstellung davon, wo die Tabs CSS live.

    In allem, Sie sollten sich auf die Kopf - /Symbolleiste und die drei anklickbare Elemente, wenn Sie Ihre eigenen Rollen.

    InformationsquelleAutor RemarkLima

  3. 0

    nur untersuchen das element, auf devloper tools kopieren Sie die css-Stile.. und Platz und die Formatvorlagen ändern, die mit wichtigen oder geben mehr Spezifität

    wie diese

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

    Demo

    InformationsquelleAutor Venu immadi

  4. 0

    Jquery ui tabs, oder sonst etwas, wenn Sie brauchen, um zu überschreiben, css-Stile, sollten Sie testen Ihre Seiten auf Firefox und installiere Firebug-plugin. Also, Sie müssen nur wählen Sie die HTML-Elemente, die Sie anpassen möchten, zu identifizieren, welche Stile angewendet werden. Dann können Sie direkt in der Firebug-Fenster die neue css-Regeln werden automatisch angewendet, um die entsprechenden Elemente. Wenn es fertig ist, einfach kopieren Sie Ihre änderungen in der css-Datei und zeigen Sie Ihre Seite erneut, um zu bestätigen, dass alles OK ist. Schließlich können Sie testen Sie Ihre Seite auf anderen Browsern. Ich würde sagen, dass dies die effektivste und einfachste Weg, um die Arbeit an der css-Stile.

    InformationsquelleAutor Anthed

Schreibe einen Kommentar