変更デフォルトのスタイルを

Question

私はタブ

HTMLでサイト持っている：それは私はデフォルトを変更したい、正常に動作しますが、

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

：

​​

jqueryのをスタイル、「ui-state-default ui-corner-top ui-tabs-アクティブui-state-active」（アクティブ時）、「ui-state-default ui-corner-top」（非アクティブ時）

私は別のタブでこのスタイルを使用します。新しいスタイルが必要です。

変更することはできますか？

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>