Avoid a tabstrip to be active, or make one active

[Chris @ Willows Consulting Ltd.]

Helly Guys,


I have two tabstrip, but I want the first one to always appear as active. Here is the excerpt of the code below (that doesn't work).

    <!-- FOOTER -->
    <div data-role="footer" data-align="left">
        <div data-role="tabstrip" data-align="left">
            <a href="#results" data-icon="globe" data-transition="slide:top" id="resultstab"><div id="results_count_display" style="color:white" class="km-text">Loading..</div></a>
            <a href="#filter" data-icon="settings" data-transition="slide:top" id="settingstab"><div class="km-text" style="color:white">Filter</div></a>
        </div>
    </div>
    <!-- END OF: FOOTER -->
<script>
$('#settingstab').bind('click', function () { $('#settingstab').removeClass('km-state-active');$('#resultstab').addClass('km-state-active'); });
</script>
</div>

I want that when "settingstab" is clicked on: the "resultstab" flips back to active.


Thanks.

[Kiril Nikolov]

Hi Sean,

Such functionality is not supported out of the box. However you can use the TabStrip's select event and change the classes of the items inside. Please check the following example showing a possible implementation:

http://jsbin.com/ATADOWu/3/edit
 
Regards,
Kiril Nikolov
Telerik

[Chris @ Willows Consulting Ltd.]

Thanks a lot Kiril, it's working fine now :).