Html5 Tabs

Bind to the removed event by type: jqxTabs. Author: http://jqwidgets.com

by jqwidgets

HTML

<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<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-top: 10px;'>
    <input type="button" id='Remove' value="Remove" />
</div>

JavaScript

$('#jqxTabs').jqxTabs({
     width: 300,
     height: 150,
     theme: 'energyblue'
 });
 $('#Remove').jqxButton({
     width: '100px',
     theme: 'energyblue'
 });
 $('#Remove').click(function () {
     var selectedItem = $('#jqxTabs').jqxTabs('selectedItem');
     var disabledItems = $('#jqxTabs').jqxTabs('getDisabledTabsCount');
     var items = $('#jqxTabs').jqxTabs('length');
     if (items > disabledItems + 1) {
         $('#jqxTabs').jqxTabs('removeAt', selectedItem);
     }
 });
 $('#jqxTabs').on('removed', function (event) {
     alert('A tab has been removed');
 });