Jquery Закругленные вкладки Cross Browser (небольшая проблема)

Question

Я пытался создать несколько закругленных вкладок без изображений, которые бы работали во всех браузерах, я взял различный код из разных мест и почти заработал, единственная проблема в том, что цвет фона вкладки не остается белым, когда вкладка активна. Я пытался исправить это часами без удачи. Он использует csspie для закругленных углов, вы можете посмотреть пример на странице здесь:

http://www.usedcar.co.uk/testtabs.html

Любая помощь будет оценена. Мне не удалось найти достойный пример вкладок jquery без изображений.

Answer 1

Удалите лишнюю фигурную скобку, она выводит ваш код из строя ...

    behavior: url(/pie/PIE.htc);}
}

РЕДАКТИРОВАТЬ: вот демо ...

Рабочая: http://jsfiddle.net/j6sF5/1

Не работает: http://jsfiddle.net/j6sF5/2/ (дополнительная фигурная скобка)

Answer 2

Вот рабочая версия: http://jsbin.com/afina3/8/edit

Сделано два изменения.Первым было переместить выбранный стиль выше .tabBox .tabs a style:

.tabBox .tabs .selected a {
    background: #FFF;
}

.tabBox .tabs a {
    float: left;
    height: 3em;
    line-height: 3em;
    -webkit-border-radius: 4px 4px 0 0;
    -moz-border-radius: 4px 4px 0 0;
    border-radius: 4px 4px 0 0;
    background: #EEE;
    border: 1px solid #BDBDBD;
    border-bottom: 0;
    padding: 0px 15px;
    color: #000;
    font-size:12px;
    text-decoration: none;
    behavior: url(/pie/PIE.htc);}
}

Затем в коде jQuery я добавил эту строку, чтобы добавить выбранный стиль в тег вкладки:

$(this).find('a').addClass("selected"); //add selected style to the link of this tab

Answer 3

Вы можете исправить это в событии click или в css (желательно в css).нажмите:

 $('.selected a').css('background-color', 'white');

или в css, что-то вроде

.selected a{background-color: white;}

в вашем css у вас есть:

.tabBox .tabs .selected a {
    background: #FFF;
}

EDIT (ваше поведение css 'PIE.htc'вызывает у вас проблемы): в конце нажмите кнопку Добавить:

$(".tabBox .tabs li").click(function() {
    $(".tabBox .tabs li").removeClass("selected"); //Remove any "active" class
    $(this).addClass("selected"); //Add "active" class to selected tab
    $(".tabBox .content").hide(); //Hide all tab content
    var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
            $(activeTab).show();
//add-->
    **$(".tabBox .tabs").find('li[class!=selected]').find('a').css('background-color', '#EEE');
    $(this).find('a').css('background-color', '#FFF');**

    return false;
});**strong text**

Answer 4

.tabBox .tabs a:hover,
.tabBox .tabs a:active,
.tabBox .tabs .selected a {
    background: none repeat scroll 0 0 #FFFFFF;
}

Должно это исправить:)