在Kendo Tabstrip中設計單個tabpanel

Question

我正在使用Kendo-UI Tabstrip，並希望將一個類添加到一個特定的tabpanel。這可能嗎？在items.Add（）部分中使用.SpriteCssClasses似乎只是將類添加到選項卡本身，而不是實際的面板。

任何幫助，非常感謝。

Answer 1

您可以嘗試使用該ID來獲取特定面板，因爲劍道將增加一個div取決於標籤條和標籤號（訂單）的名稱特定ID，例如：

@(Html.Kendo().TabStrip() 
    .Name("Main") 
    .Items(Main => 
    { 
     Main.Add() 
      .Text("test1 title").Content(@<text> 
       test1 
      </text>); 
     Main.Add() 
      .Text("test2 title") 
      .Content(@<text> 
       test2 
      </text>); 
    }) 
) 

這將產生以下HTML：

<div class="k-tabstrip-wrapper" style=""> 
    <div id="Main" class="k-widget k-tabstrip k-header" data-role="tabstrip" tabindex="0" role="tablist" aria-activedescendant="Main_ts_active"> 
     <ul class="k-reset k-tabstrip-items"> 
      <li class="k-item k-state-default k-first k-tab-on-top k-state-active" role="tab" aria-controls="Main-1" style="" aria-selected="true"> 
       <span class="k-loading k-complete"></span> 
       <a href="#Main-1" class="k-link">test1 title</a> 
      </li> 
      <li class="k-item k-state-default k-last" role="tab" aria-controls="Main-2" style=""> 
       <span class="k-loading k-complete"></span> 
       <a href="#Main-2" class="k-link">test2 title</a> 
      </li> 
     </ul> 
     <div id="Main-1" class="k-content k-state-active" role="tabpanel" aria-expanded="true" style="height: auto; overflow: hidden; opacity: 1; display: block;"> 
      <div style="display: none; position: absolute; opacity: 0.8; background-color: rgb(255, 255, 255); z-index: 1001; width: 33.4px; height: 20px;" class="tata-ajax-loader"> 
       <div style="background-position: center;background-repeat: no-repeat;height:100%;width:100%;background-color: transparent;" class="tata-ajax-loader-img"></div> 
      </div> 
      test1 
     </div> 
     <div id="Main-2" class="k-content" role="tabpanel" aria-expanded="false" style="height: auto; overflow: hidden; opacity: 0; display: none;" aria-hidden="true"> 
      <div style="display: none; position: absolute; opacity: 0.8; background-color: rgb(255, 255, 255); z-index: 1001; width: 33.4px; height: 20px;" class="tata-ajax-loader"> 
       <div style="background-position: center;background-repeat: no-repeat;height:100%;width:100%;background-color: transparent;" class="tata-ajax-loader-img"></div> 
      </div> 
      test2 
     </div> 
    </div> 
</div> 

注有ID爲「主-1」的div和「主2」是實際面板的ID這是你想要的東西從我的理解，所以你可以添加CSS上的ID：

#Main-1 { 
    background-color: #E3F7A8; 
}