Set Selected Tab in JavaScript

[vicebetancourt]

I want change the selected tab using javascript

$("#tabPeople").ejTab();

<div id="tabPeople" style="display: none">

                        <ul>

                            <li><a rel='nofollow' href="#admins">Admins</a></li>

                            <li><a rel='nofollow' href="#doc">Doctors</a></li>

                            <li><a rel='nofollow' href="#teachers">Teachers</a></li>

                        </ul>

                        <div id="admins"></div>

                        <div id="admins"></div>

                        <div id="admins"></div>

</div>

[Sasikala Nagarajan]

Hi Vicente,
Thanks for using Syncfusion products,

I want to change the selected tab using javascript

We can achieve your requirement using our existing property selectedItemIndex. This API is used to set the active header based on the given index value.

Please refer the below code snippet to set the selected Item Index during Initialization.

[script]

$(function () {

// declaration

$("#defaultTab").ejTab({selectedItemIndex:2});
});

Also, we can change the selected Item Index after initializing the tab control. We can achieve this using object of tab control. Please refer the below code snippet to set selected Item Index using object of the tab control.

[script]

$("#tabPeople").ejTab();

tabObj = $("#tabPeople").data("ejTab");
tabObj.option("selectedItemIndex",2);

We have prepared the sample based on this. Please check with the below link

http://jsplayground.syncfusion.com/cutp4hws

Also please refer the below link to know more about controls and its available properties ,methods and events.

http://helpjs.syncfusion.com/js/overview

Please check with the given links and let us know if you need any further assistance.

Regards,
Sasikala Nagarajan

[vicebetancourt]

Thanks!, it works. You're a legend.

Regards

[Sasikala Nagarajan]

Hi Vicente,
Thanks for the update,
Please get back to us if you need any further assistance,
Regards,
Sasikala Nagarajan