удалить цвет фона из вкладок jquery

Question

Я хотел бы удалить фоновый серый цвет контейнера с двумя вкладками. Таким образом, только вкладки окрашены. Ive удалил все CSS, но не радость. Должно быть, это из JQuery .tabs(), может ли кто-нибудь посоветовать, как я могу удалить это?

$(document).ready(function() { 
 
    $(".shoptab").tabs(); 
 
});

#list ul { 
 
    border-radius: 0; 
 
    background: none; 
 
    border: 0; 
 
    border-bottom: 1px solid #cbcdcd; 
 
    } 
 
    #list ul li { 
 
    border-radius: 0; 
 
    } 
 
    #list { 
 
    border: 0; 
 
    } 
 
    .ui-state-default, 
 
    .ui-widget-content .ui-state-default, 
 
    .ui-widget-header .ui-state-default { 
 
    border-color: #e4e4e4; 
 
    background: #f2f2f2; 
 
    color: #cbcbcb; 
 
    } 
 
    .ui-state-default { 
 
    color: #e7e7e7; 
 
    } 
 
    .ui-state-active, 
 
    .ui-widget-content .ui-state-active, 
 
    .ui-widget-header .ui-state-active { 
 
    border-color: #cbcdcd; 
 
    background: #fff; 
 
    color: #333333; 
 
    } 
 
    .ui-state-hover, 
 
    .ui-widget-content .ui-state-hover, 
 
    .ui-widget-header .ui-state-hover { 
 
    border: 1px solid #cbcdcd; 
 
    } 
 
    .ui-state-selected ui-state-hover, 
 
    #ui-state-active ui-state-hover { 
 
    background: #fff: 
 
    } 
 
    .ui-state-default a, 
 
    .ui-state-default a:link, 
 
    .ui-state-default a:visited { 
 
    color: #a9a9a9; 
 
    } 
 
    .ui-state-hover a, 
 
    .ui-state-hover a:hover { 
 
    color: #333333; 
 
    } 
 
    .ui-state-active a, 
 
    .ui-state-active a:link, 
 
    .ui-state-active a:visited { 
 
    color: #333333; 
 
    } 
 
    #list li ul li { 
 
    margin-left: 10px; 
 
    font-size: 11px; 
 
    font-weight: bold; 
 
    font-family: Arial, Verdana, sans-serif; 
 
    } 
 
    #list li ul li a { 
 
    padding: 4px 7px 4px 7px; 
 
    } 
 
    #list li ul { 
 
    margin: 0; 
 
    }

<link href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
 

 
<div id="loc-list"> 
 
    <div class="shoptab"> 
 
    <h2>Shop 1</h2> 
 

 
    <ul> 
 
     <li><a href="#tabs-1">Address</a> 
 

 
     </li> 
 
     <li><a href="#tabs-2">Opening hours</a> 
 

 
     </li> 
 
    </ul> 
 
    <div id="tabs-1"> 
 
     <p>Tab 1 content</p> 
 
    </div> 
 
    <div id="tabs-2"> 
 
     <p>Tab 2 content</p> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

Вы должны удалить стиль границы и фона для элемента .ui-widget-header

.ui-widget-header { 
    border: 0px; 
    background: none; 
} 

Working Demo

Answer 2

Я думаю, что это то, что вы ищете. Я использовал белый цвет, но вы можете добавить любой цвет, который вам нравится.

.ui-widegt-header a{ 
width: 100% 
background-color: none; 
}