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

1. During the document.ready event, use jQuery to make a reference to the background color of the selected tab.
   
2. 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>

See Also

• show API Reference