JavaScript Tabs

Set the selectedItem property of the jqxTabs. Author: http://jqwidgets.com

HTML

<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<div id='jqxTabs'>
    <ul style='margin-left: 20px;'>
        <li>Tab 1</li>
        <li>Tab 2</li>
        <li>Tab 3</li>
    </ul>
    <div>Content 1</div>
    <div>Content 2</div>
    <div>Content 3</div>
</div>
<div style="margin: 5px;">
  <button id="check">Current tab</button>
</div>
<div id="log"></div>

JavaScript

$('#jqxTabs').jqxTabs({
     width: 300,
     height: 150,
     theme:'energyblue',
     selectedItem:1
 });

$('#check').jqxButton({ template: 'info' });

$('#check').on('click', function (ev) {
	var selectedItem = $('#zraTabs').jqxTabs('selectedItem');
    console.log(selectedItem);
    $('#log').html('Selected tab ID: ' + selectedItem);
});