问题描述:

I would like to remove the background grey colour of the container holding the 2 tabs. So only the tabs are coloured. Ive removed all the CSS but not joy. It must be coming from the the JQuery .tabs(), can anyone advise how I can remove this?

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

网友答案:

You need to remove style border and background for element .ui-widget-header

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

Working Demo

网友答案:

I think this is what you're looking for. I used white but you can add whatever color you like.

.ui-widegt-header a{
width: 100%
background-color: none;
}
相关阅读:
Top