select

Triggered before a tab is selected.

Event Data

e.item Element

The selected item chosen by a user.

e.contentElement Element

The content element of the tab going to be selected.

Attach select event handler during initialization; detach via unbind()

<div id="tabstrip">
    <ul>
        <li>Tab 1</li>
        <li>Tab 2</li>
    </ul>
    <div>Content 1</div>
    <div>Content 2</div>
</div>

<script>
    // event handler for select
    var onSelect = function(e) {
        // access the selected item via e.item (Element)

        // detach select event handler via unbind()
        tabStrip.unbind("select", onSelect);
    };

    // attach select event handler during initialization
    var tabStrip = $("#tabstrip").kendoTabStrip({
        select: onSelect
    }).data("kendoTabStrip");
</script>

Attach select event handler via bind(); detach via unbind()

<div id="tabstrip">
    <ul>
        <li>Tab 1</li>
        <li>Tab 2</li>
    </ul>
    <div>Content 1</div>
    <div>Content 2</div>
</div>

<script>
    // event handler for select
    var onSelect = function(e) {
        // access the selected item via e.item (Element)

        // detach select event handler via unbind()
        tabStrip.unbind("select", onSelect);
    };

    // attach select event handler via bind()
    var tabStrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");
    tabStrip.bind("select", onSelect);
</script>
In this article