New to Kendo UI for jQuery? Download free 30-day trial

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

In this article