Question

我有一个带标签的网站

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();

它工作正常，但是，我想更改默认样式，＆＃34; ui-state-default ui-corner-top ui-tabs-active ui-state-active＆＃34;当活跃时，＆＃34; ui-state-default ui-corner-top＆＃34;何时不活跃。

我在另一个标签中使用这些样式，我需要新的样式。

可以改变吗？

Answer 1

您是否期待下面的内容？

$('#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>

更改jquery选项卡中的默认样式

1 个答案: