2016-06-23 29 views
0

Ich möchte Rand-Top von current tab-content als active tab background color halten. Ich schrieb unter css dafür, aber es trifft nicht zu.Rand-Top-Farbe muss die gleiche Farbe wie aktive Registerkarte Hintergrundfarbe, wenn Registerkarte ist klicken

.tab-content.current{ 
      display: inherit; 
      border-top: 5px solid #3399CC; 
     } 

wenn ich setzte !important zu border-top dann die Hover-Effekt von border-top bewirbt sich nicht. Für diesen Hover-Effekt habe ich ein Skript dafür geschrieben. Bitte helfen Sie, es gibt andere Möglichkeiten, dies zu tun. Vielen Dank. Hoffe, du hast meine Frage. Wenn nicht, lass es mich wissen.

$(document).ready(function() { 
 

 
    $('ul.tabs li').click(function() { 
 
    var tab_id = $(this).attr('data-tab'); 
 

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

 
    $(this).addClass('current'); 
 
    $("#" + tab_id).addClass('current'); 
 
    }) 
 

 
    $(document).ready(function() { 
 
    $('.tab1').hover(function() { 
 
     $('.tab-content').css({ 
 
     "border-top": "5px solid #FF0000" 
 
     }); 
 
    }); 
 
    $('.tab2').hover(function() { 
 
     $('.tab-content').css({ 
 
     "border-top": "5px solid #88DD00" 
 
     }); 
 
    }); 
 
    $('.tab3').hover(function() { 
 
     $('.tab-content').css({ 
 
     "border-top": "5px solid #673ab7" 
 
     }); 
 
    }); 
 
    $('.tab4').hover(function() { 
 
     $('.tab-content').css({ 
 
     "border-top": "5px solid #336699" 
 
     }); 
 
    }); 
 
    }); 
 

 
})
body { 
 
    margin-top: 100px; 
 
    font-family: 'Trebuchet MS', serif; 
 
    line-height: 1.6 
 
} 
 
.container { 
 
    width: 800px; 
 
    margin: 0 auto; 
 
} 
 
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: #FF0000; 
 
    color: #fff; 
 
    border: none; 
 
} 
 
.tab2:hover { 
 
    background: #88DD00; 
 
    color: #fff; 
 
    border: none; 
 
} 
 
.tab3:hover { 
 
    background: #673ab7; 
 
    color: #fff; 
 
    border: none; 
 
} 
 
.tab4:hover { 
 
    background: #336699; 
 
    color: #fff; 
 
    border: none; 
 
} 
 
ul.tabs li.current { 
 
    background: #3399CC; 
 
    color: #fff; 
 
    border: none; 
 
} 
 
.tab-content { 
 
    display: none; 
 
    background: #ededed; 
 
    padding: 15px; 
 
} 
 
.tab-content.current { 
 
    display: inherit; 
 
    border-top: 5px solid #3399CC; 
 
}
<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 current tab1" data-tab="tab-1">Tab One</li> 
 
    <li class="tab-link tab2" data-tab="tab-2">Tab Two</li> 
 
    <li class="tab-link tab3" data-tab="tab-3">Tab Three</li> 
 
    <li class="tab-link tab4" data-tab="tab-4">Tab Four</li> 
 
    </ul> 
 

 
    <div id="tab-1" class="tab-content current"> 
 
    Lorem ipsufgdgt dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
 
    </div> 
 
    <div id="tab-2" class="tab-content"> 
 
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nullggdt mollit anim id est laborum. 
 
    </div> 
 
    <div id="tab-3" class="tab-content"> 
 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irurgdgdglit esse cillum dolore eu fugiat nulla pariatur. 
 
    </div> 
 
    <div id="tab-4" class="tab-content"> 
 
    Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniamdfdrgdgercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
 
    </div> 
 

 
</div> 
 
<!-- container -->

Antwort

1

Try this:

$(document).ready(function() { 
 

 
    $('ul.tabs li').click(function() { 
 
    var tab_id = $(this).attr('data-tab'); 
 

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

 
    $(this).addClass('current'); 
 
    $("#" + tab_id).addClass('current'); 
 
    }) 
 

 
    $(document).ready(function() { 
 
    $('.tab1').hover(function() { 
 
if($(this).hasClass('current')){ 
 
$('.tab-content').css({ 
 
     "border-top": "5px solid #3399cc" 
 
     }); 
 
}else{ 
 
$('.tab-content').css({ 
 
     "border-top": "5px solid #FF0000" 
 
     });} 
 
     
 
    }); 
 
    $('.tab2').hover(function() {   
 
     if($(this).hasClass('current')){ 
 
     $('.tab-content').css({ 
 
     "border-top": "5px solid #3399cc" 
 
     }); 
 
    }else{ 
 
     $('.tab-content').css({ 
 
     "border-top": "5px solid #88DD00" 
 
     }); 
 
     } 
 
    }); 
 
    $('.tab3').hover(function() { 
 
     if($(this).hasClass('current')){ 
 
     $('.tab-content').css({ 
 
     "border-top": "5px solid #3399cc" 
 
     }); 
 
    }else{ 
 
     $('.tab-content').css({ 
 
     "border-top": "5px solid #673ab7" 
 
     }); 
 
     }   
 
    }); 
 
    $('.tab4').hover(function() { 
 
     if($(this).hasClass('current')){ 
 
     $('.tab-content').css({ 
 
     "border-top": "5px solid #3399cc" 
 
     }); 
 
    }else{ 
 
     $('.tab-content').css({ 
 
     "border-top": "5px solid #336699" 
 
     }); 
 
     } 
 
     
 
    }); 
 
    }); 
 

 
})
body { 
 
    margin-top: 100px; 
 
    font-family: 'Trebuchet MS', serif; 
 
    line-height: 1.6 
 
} 
 
.container { 
 
    width: 800px; 
 
    margin: 0 auto; 
 
} 
 
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: #FF0000; 
 
    color: #fff; 
 
    border: none; 
 
} 
 
.tab2:hover { 
 
    background: #88DD00; 
 
    color: #fff; 
 
    border: none; 
 
} 
 
.tab3:hover { 
 
    background: #673ab7; 
 
    color: #fff; 
 
    border: none; 
 
} 
 
.tab4:hover { 
 
    background: #336699; 
 
    color: #fff; 
 
    border: none; 
 
} 
 
ul.tabs li.current { 
 
    background: #3399CC; 
 
    color: #fff; 
 
    border: none; 
 
} 
 
.tab-content { 
 
    display: none; 
 
    background: #ededed; 
 
    padding: 15px; 
 
} 
 
.tab-content.current { 
 
    display: inherit; 
 
    border-top: 5px solid #3399CC; 
 
}
<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 current tab1" data-tab="tab-1">Tab One</li> 
 
    <li class="tab-link tab2" data-tab="tab-2">Tab Two</li> 
 
    <li class="tab-link tab3" data-tab="tab-3">Tab Three</li> 
 
    <li class="tab-link tab4" data-tab="tab-4">Tab Four</li> 
 
    </ul> 
 

 
    <div id="tab-1" class="tab-content current"> 
 
    Lorem ipsufgdgt dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
 
    </div> 
 
    <div id="tab-2" class="tab-content"> 
 
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nullggdt mollit anim id est laborum. 
 
    </div> 
 
    <div id="tab-3" class="tab-content"> 
 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irurgdgdglit esse cillum dolore eu fugiat nulla pariatur. 
 
    </div> 
 
    <div id="tab-4" class="tab-content"> 
 
    Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniamdfdrgdgercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
 
    </div> 
 

 
</div> 
 
<!-- container -->

+0

ist es möglich, wenn Schweben auf aktiven Reitern die border-top wird als Hintergrundfarbe gleich bleiben? –

+0

Mein Code wurde aktualisiert ... bitte überprüfen Sie ... –

1

Sie benötigen so?

<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 current tab1" data-tab="tab-1">Tab One</li> 
 
    <li class="tab-link tab2" data-tab="tab-2">Tab Two</li> 
 
    <li class="tab-link tab3" data-tab="tab-3">Tab Three</li> 
 
    <li class="tab-link tab4" data-tab="tab-4">Tab Four</li> 
 
    </ul> 
 

 
    <div id="tab-1" class="tab-content current"> 
 
    Lorem ipsufgdgt dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
 
    </div> 
 
    <div id="tab-2" class="tab-content"> 
 
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nullggdt mollit anim id est laborum. 
 
    </div> 
 
    <div id="tab-3" class="tab-content"> 
 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irurgdgdglit esse cillum dolore eu fugiat nulla pariatur. 
 
    </div> 
 
    <div id="tab-4" class="tab-content"> 
 
    Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniamdfdrgdgercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
 
    </div> 
 

 
</div> 
 
<script> 
 
$(document).ready(function() { 
 

 
    $('ul.tabs li').click(function() { 
 
    var tab_id = $(this).attr('data-tab'); 
 

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

 
    $(this).addClass('current'); 
 
    $("#" + tab_id).addClass('current'); 
 
    }) 
 

 
    $(document).ready(function() { 
 
\t 
 
    $('.tab1,.tab2,.tab3,.tab4').mouseover(function() { 
 
\t \t bcolor=$('.tab-content').css("border-top"); 
 
\t }); 
 
\t 
 
    $('.tab1').hover(function() { 
 
     $('.tab-content').css({ 
 
     "border-top": "5px solid #FF0000" 
 
     }); 
 
    }); 
 
    $('.tab2').hover(function() { 
 
     $('.tab-content').css({ 
 
     "border-top": "5px solid #88DD00" 
 
     }); 
 
    }); 
 
    $('.tab3').hover(function() { 
 
     $('.tab-content').css({ 
 
     "border-top": "5px solid #673ab7" 
 
     }); 
 
    }); 
 
    $('.tab4').hover(function() { 
 
     $('.tab-content').css({ 
 
     "border-top": "5px solid #336699" 
 
     }); 
 
    }); 
 
\t 
 
\t 
 
    $('.tab1,.tab2,.tab3,.tab4').mouseout(function() { 
 
\t \t $('.tab-content').css("border-top",bcolor); 
 
\t }); 
 
\t 
 
    }); 
 

 
}) 
 
</script> 
 
<style> 
 
body { 
 
    margin-top: 100px; 
 
    font-family: 'Trebuchet MS', serif; 
 
    line-height: 1.6 
 
} 
 
.container { 
 
    width: 800px; 
 
    margin: 0 auto; 
 
} 
 
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: #FF0000; 
 
    color: #fff; 
 
    border: none; 
 
} 
 
.tab2:hover { 
 
    background: #88DD00; 
 
    color: #fff; 
 
    border: none; 
 
} 
 
.tab3:hover { 
 
    background: #673ab7; 
 
    color: #fff; 
 
    border: none; 
 
} 
 
.tab4:hover { 
 
    background: #336699; 
 
    color: #fff; 
 
    border: none; 
 
} 
 
ul.tabs li.current { 
 
    background: #3399CC; 
 
    color: #fff; 
 
    border: none; 
 
} 
 
.tab-content { 
 
    display: none; 
 
    background: #ededed; 
 
    padding: 15px; 
 
} 
 
.tab-content.current { 
 
    display: inherit; 
 
    border-top: 5px solid #3399CC; 
 
} 
 
</style>

Verwandte Themen