code1

<html><head>
<link rel="stylesheet" type="text/css" media="screen" href="css/smoothness/jquery-ui-1.10.3.custom.min.css" />
     <link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
     <link rel="stylesheet" type="text/css" media="screen" href="plugins/ui.multiselect.css" />
     <link rel="stylesheet" type="text/css" media="screen" href="css/ocigc_report.css" />
     <link rel="stylesheet" type="text/css" media="screen" href="css/colorbox.css" />

     <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
     <script src="js/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>
     <script src="js/grid.locale-en.js" type="text/javascript"></script>
     <script src="plugins/ui.multiselect.js" type="text/javascript"></script>
     <script src="js/jquery.jqGrid.src.js" type="text/javascript"></script>
     <script src="js/jquery.colorbox-min.js" type="text/javascript"></script>
     <script src="data.js" type="text/javascript"></script>

<script>


$(function() {
  $('#tabs').tabs({
    select: function(event, ui) {
        console.log($(ui.tab)); // the tab selected
        console.log(ui.index);
    },
    show: function(event, ui) {
        console.log($(ui.tab)); // the tab shown
        console.log(ui.index);
    }
    });
});

</script>
</head>
<body>

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Nunc tincidunt</a></li>
        <li><a href="#tabs-2">Proin dolor</a></li>
        <li><a href="#tabs-3">Aenean lacinia</a></li>
    </ul>
    <div id="tabs-1">
        <p>text1</p>
    </div>
    <div id="tabs-2">
        <p>text2</p>
    </div>
    <div id="tabs-3">
        <p>text3</p>
    </div>
</div>
</body>
</html>