изменить стиль по умолчанию на вкладках jquery

У меня есть сайт с вкладками

HTML:

<div id="tabs" class="row">
     <ul class="nav nav-tabs nav-justified">
         <li>
            <a href="#tabsActividades">Actividades</a>
         </li>
         <li>
            <a href="#tabsTareas">Tareas</a>
          </li>
      </ul>
      <div id="tabsActividades" class="row">
           <!-- tab content -->    
      </div>
      <div id="tabsTareas" class="row">
           <!-- tab content -->                
     </div>
 </div>

JQuery:

$( "#tabs").tabs();

он работает нормально, но я хотел бы изменить стили по умолчанию: «ui-state-default ui-corner-top ui-tabs-active ui-state-active», когда он активен, «ui-state-default ui-corner- сверху», когда он неактивен.

Я использую эти стили в других вкладках, и мне нужны новые.

возможно ли изменить?


javascript jquery jquery-ui-tabs
person cucuru    schedule 01.02.2017    source источник
comment
Надеюсь, эта ссылка поможет вам keith-wood.name/uitabs.html   -  person Arun CM    schedule 01.02.2017

Ответы (1)


arrow_upward
0
arrow_downward

Вы ожидаете что-то вроде ниже?

$('#myTab a').click(function(e) {
  e.preventDefault()
  $(this).tab('show')
})
.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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc2/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc2/css/bootstrap.min.css" rel="stylesheet"/>

<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>Actividades</p>
  </div>
  <div class="tab-pane" id="tab2">
    <p>Tareas</p>
  </div>
  <div class="tab-pane" id="tab3">
    <p>This is the 3rd tab.</p>
  </div>
  <div class="tab-pane" id="tab4"></div>
</div>

person Arun CM    schedule 01.02.2017