Ошибка цвета вкладки в HTML и CSS

Нужна помощь с вкладками на странице.Ошибка цвета вкладки в HTML и CSS

1) У меня есть следующие вкладки на моей странице.

По умолчанию при загрузке страницы ни один из вкладки не будет выделен. Я хочу, чтобы вкладка «Функциональная система бизнес-системы» была выделена по умолчанию. Как мне это достичь?

2) Когда я выбираю вкладку, цвет вкладки и граница одного цвета.

Но когда я наведите курсор мыши на любой другой вкладке, цвет границы изменений в hover цвета. Я не хочу это. Я хочу, чтобы цвет рамки менялся только тогда, когда я щелкаю вкладку. Как мне это достичь?

Мой код здесь - fiddle

источник

2016-08-02 Pankaj Morajkar

Выразить '' css' & html' – jonju

@jonju - Существует скрипку ссылка на вопрос! – Pugazh

Упс! мой плохой .. это было слишком мало, я не мог его видеть – jonju

Вот решение.

Сделайте свой .tab1 текущим/выбранным при загрузке страницы. Добавьте код ниже $(document).ready().
```
$('.tab1').addClass('current'); 
    $('.tab-content').css("border-top", "5px solid #3399CC"); 
    $('#tab-1').addClass('current'); 
```
Удалите JQuery .hover(), чтобы удалить границы укладки.

Updated Fiddle.

Пример сниппета:

$(document).ready(function() { 
 
    /* Apply current on Page load */ 
 
    $('.tab1').addClass('current'); 
 
    $('.tab-content').css("border-top", "5px solid #3399CC"); 
 
    $('#tab-1').addClass('current'); 
 

 
    $('ul.tabs li').click(function() { 
 

 
    var contentid = '#' + $(this).attr('datatab'); 
 

 
    $('ul.tabs li').removeClass('current'); 
 
    $('.tab-content').removeClass('current'); 
 

 
    $(this).addClass('current'); 
 
    $(contentid).addClass('current').css("border-top", "5px solid " + $(this).css("background-color")); 
 
    }); 
 

 
});

.home-tab-title { 
 
    width: 100%; 
 
    height: 65px; 
 
    padding: 10px 0 10px 0; 
 
} 
 
img.home-duck { 
 
    width: 35px; 
 
    float: left; 
 
    padding: 12px 10px 0 0; 
 
} 
 
.home-heading { 
 
    display: block; 
 
    float: left; 
 
    font-size: 22px; 
 
    margin-top: 20px; 
 
    margin-bottom: 20px; 
 
    clear: right; 
 
    font-family: "Segoe UI", arial, sans-serif; 
 
} 
 
.home-subheading { 
 
    margin-top: 10px; 
 
    margin-bottom: 10px; 
 
} 
 
.home-subheading { 
 
    font-size: 15px; 
 
    color: #000; 
 
    font-weight: 500; 
 
    font-family: "Segoe UI", arial, sans-serif; 
 
    display: inline-flex; 
 
} 
 
.tab-content1 { 
 
    margin-left: 2.2em; 
 
    display: inline-flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
    justify-content: left; 
 
} 
 
.tab-content1-block { 
 
    padding: 0 1em 1em .5em; 
 
    min-width: 30%; 
 
} 
 
.tab-content1-block ul li { 
 
    margin-bottom: 10px; 
 
    margin-left: -22px; 
 
} 
 
— css — 
 
/* Hide the user navigation for community and anon on home. Shows it for pro members. */ 
 

 
.columbia-page-home .elm-header-user-nav { 
 
    display: none; 
 
} 
 
.columbia-page-home.elm-user-pro-member.columbia-page-home .elm-header-user-nav { 
 
    display: block; 
 
} 
 
/* Hide the user navigation for community and anon on home. */ 
 

 
.columbia-page-home .elm-header-home-nav { 
 
    display: none; 
 
} 
 
/* Hides the user nav's global search on home. */ 
 

 
.columbia-page-home .elm-global-search { 
 
    visibility: hidden; 
 
} 
 
/* Sets the correct positioning of the footer based on user role for home only. */ 
 

 
.columbia-page-home .elm-footer { 
 
    bottom: auto; 
 
} 
 
@media all and (min-width: 78.75em) { 
 
    .elm-user-pro-member.columbia-page-home .elm-footer { 
 
    bottom: 3.4em; 
 
    } 
 
} 
 
@media all and (min-width: 37.5em) { 
 
    .elm-user-pro-member.columbia-page-home .elm-footer { 
 
    bottom: auto; 
 
    } 
 
} 
 
li.ui-state-active { 
 
    padding-bottom: 0px !important; 
 
} 
 
— css — 
 
/* Code for PageTabs template */ 
 

 
body .ui-tabs .ui-tabs-nav li a { 
 
    padding: .5em 1em; 
 
    width: 225px; 
 
    word-wrap: initial; 
 
    height: 25px; 
 
    text-align: center; 
 
    display: inline-block; 
 
} 
 
— css — 
 
/* Code for new tabs */ 
 

 
. body { 
 
    margin-top: 100px; 
 
    font-family: 'Trebuchet MS', serif; 
 
    line-height: 1.6 float: left; 
 
} 
 
container { 
 
    width: auto; 
 
    margin: 0 0; 
 
} 
 
ul.tabs { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    list-style: none; 
 
} 
 
ul.tabs li { 
 
    background: #EFEFEF; 
 
    color: #222; 
 
    display: inline-block; 
 
    padding: 10px 15px; 
 
    cursor: pointer; 
 
    border-top: 1px solid #000; 
 
    border-left: 1px solid #000; 
 
    border-right: 1px solid #000; 
 
    border-radius: 5px 5px 0px 0px; 
 
} 
 
.tab1:hover { 
 
    background: #3399CC; 
 
    color: #fff; 
 
    border: none; 
 
} 
 
.tab2:hover { 
 
    background: #12B58A; 
 
    color: #fff; 
 
    border: none; 
 
} 
 
.tab3:hover { 
 
    background: #673ab7; 
 
    color: #fff; 
 
    border: none; 
 
} 
 
.tab4:hover { 
 
    background: #336699; 
 
    color: #fff; 
 
    border: none; 
 
} 
 
.tab5:hover { 
 
    background: #3399CC; 
 
    color: #fff; 
 
    border: none; 
 
} 
 
.tab6:hover { 
 
    background: #12B58A; 
 
    color: #fff; 
 
    border: none; 
 
} 
 
.tab7:hover { 
 
    background: #673ab7; 
 
    color: #fff; 
 
    border: none; 
 
} 
 
.tab8:hover { 
 
    background: #336699; 
 
    color: #fff; 
 
    border: none; 
 
} 
 
.tab9:hover { 
 
    background: #3399CC; 
 
    color: #fff; 
 
    border: none; 
 
} 
 
.tab10:hover { 
 
    background: #12B58A; 
 
    color: #fff; 
 
    border: none; 
 
} 
 
.tab11:hover { 
 
    background: #673ab7; 
 
    color: #fff; 
 
    border: none; 
 
} 
 
.tab-link.tab1.current { 
 
    background: #3399CC; 
 
    color: #fff; 
 
    border: none; 
 
} 
 
.tab-link.tab2.current { 
 
    background: #12B58A; 
 
    color: #fff; 
 
    border: none; 
 
} 
 
.tab-link.tab3.current { 
 
    background: #673ab7; 
 
    color: #fff; 
 
    border: none; 
 
} 
 
.tab-link.tab4.current { 
 
    background: #336699; 
 
    color: #fff; 
 
    border: none; 
 
} 
 
.tab-link.tab5.current { 
 
    background: #3399CC; 
 
    color: #fff; 
 
    border: none; 
 
} 
 
.tab-link.tab6.current { 
 
    background: #12B58A; 
 
    color: #fff; 
 
    border: none; 
 
} 
 
.tab-link.tab7.current { 
 
    background: #673ab7; 
 
    color: #fff; 
 
    border: none; 
 
} 
 
.tab-link.tab8.current { 
 
    background: #336699; 
 
    color: #fff; 
 
    border: none; 
 
} 
 
.tab-link.tab9.current { 
 
    background: #3399CC; 
 
    color: #fff; 
 
    border: none; 
 
} 
 
.tab-link.tab10.current { 
 
    background: #12B58A; 
 
    color: #fff; 
 
    border: none; 
 
} 
 
.tab-link.tab11.current { 
 
    background: #673ab7; 
 
    color: #fff; 
 
    border: none; 
 
} 
 
.tab-content { 
 
    display: none; 
 
    background: #ededed; 
 
    padding: 15px; 
 
} 
 
.tab-content.current { 
 
    display: inherit; 
 
    border-top: 5px solid #3399CC; 
 
    background: #ffffff; 
 
} 
 
.tab-link { 
 
    margin: 0px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="container"> 
 

 
    <ul class="tabs"> 
 
    <li class="tab-link tab1" datatab="tab-1">'Business System Functionality'</li> 
 
    <li class="tab-link tab2" datatab="tab-2">'Product'</li> 
 
    <li class="tab-link tab3" datatab="tab-3">'Environment Administration'</li> 
 
    <li class="tab-link tab4" datatab="tab-4">'Training'</li> 
 
    <li class="tab-link tab5" datatab="tab-5">'Release Notes'</li> 
 
    <li class="tab-link tab6" datatab="tab-6">'Architecture'</li> 
 
    <li class="tab-link tab7" datatab="tab-7">'Testing'</li> 
 
    <li class="tab-link tab8" datatab="tab-8">'System Administration'</li> 
 
    <li class="tab-link tab9" datatab="tab-9">'Site Management'</li> 
 
    <li class="tab-link tab10" datatab="tab-10">'Staging'</li> 
 
    <li class="tab-link tab11" datatab="tab-11">'Regulatory Compliance Board'</li> 
 
    </ul> 
 

 

 
    <div id="tab-1" class="tab-content current"> 
 
    Business System Functionality 
 
    </div> 
 

 
</div>

источник

2016-08-02 10:16:26 Pugazh

@PankajMorajkar - Я изменил код только для иллюстративной цели. При необходимости внесите необходимые изменения. – Pugazh

@Pugazh ... У меня есть содержимое на вкладках ... когда я использую ваш jscript, нажав вкладки, содержимое на вкладках не видно ... проверьте скрипту ... https://jsfiddle.net/3vbfq3bf/15/..... можете ли вы помочь? –

@PankajMorajkar - Вот обновленный код - https://jsfiddle.net/Pugazh/3vbfq3bf/16/ – Pugazh

-1

1) Добавление класса, например, active что делает то же самое, как вашего парение

.tab1:hover, .tab1.active { 
    background: #3399CC; 
    color: #fff; 
    border: none; 
}

добавив класса подчеркнет вашему элемент

2) Границы цвет не меняется вообще, так как вы удаляете границу с border: none; установить другой border-color или оставить его как есть.

источник

2016-08-02 10:03:24 AlexG

Не могли бы вы объяснить ваши downvotes? – AlexG

Извините, я не хотел проголосовать? Должно быть, я нажал что-то неправильно. Как я могу исправить это? –

Продвижение или нажатие кнопки downvote снова :) – AlexG

Ошибка цвета вкладки в HTML и CSS

ответ

Смежные вопросы