Set Background Color of the Tab to the Content
Environment
Product | Progress® Kendo UI® TabStrip for jQuery | Product Version | 2019.1.115 |
Description
How can I set the background color of the content to the same color as the tab?
Solution
- During the
document.ready
event, use jQuery to make a reference to the background color of the selected tab.
- Set the background color of the content.
You can use the suggested approach in the show
event so that when the user clicks a tab, the content will match the background color of the tab.
<div id="example">
<div class="demo-section k-content">
<div id="tabstrip">
<ul>
<li class="k-active">
First Tab
</li>
<li>
Second Tab
</li>
<li>
Third Tab
</li>
</ul>
<div>First Tab</div>
<div>Second Tab</div>
<div>Third Tab</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$("#tabstrip").kendoTabStrip({
show: onShow
});
function onShow(e){
//will change when tab is clicked
var tabBackGroundColor = $(".k-tabstrip-items .k-active").css("background-color");
$(".k-tabstrip .k-content.k-active").css("background-color", tabBackGroundColor);
}
//for the initial load
var tabBackGroundColor = $(".k-tabstrip-items .k-active").css("background-color");
$(".k-tabstrip .k-content.k-active").css("background-color", tabBackGroundColor);
});
</script>