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）クラスを追加します。たとえば、あなたはborder: none;セット別に境界線を削除しているので、境界線の色は、全く変更されません

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

あなたのホバーと同じクラスを追加すると、あなたの要素

2をハイライト表示しますん）activeborder-colorをそのまま使用してください。

出典

2016-08-02 10:03:24 AlexG

あなたはあなたのdownvotes？ – AlexG

申し訳ありませんが、私は投票を停止するつもりはありませんでしたか？私は間違った何かをクリックしたに違いない。どうすれば修正できますか？ –

Upvoting、またはdownvoteボタンをもう一度押してください:) – AlexG

HTMLとCSSのタブカラーの問題

答えて

関連する問題