实现切换table标签实例，如下代码可以直接copy，根据自己需要的样式调试使用。
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>tab-JQ</title>
<style>
* {margin: 0; padding: 0; list-style: none;}
#wrap {width: 600px; margin: 100px auto 0; overflow: hidden;}
#tit {height: 30px;width: 600px;}
#tit span {float: left; height: 30px; line-height: 30px; width: 200px; font-size: 20px; text-align: center; color: #ccc;background: green;}
#con li{display: none; height: 200px; width: 600px; background: pink;font-size: 100px;line-height: 200px;text-align: center;}
#tit span.select {background: red; color: #ccc;}
#con li.show {display: block;}
</style>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
</head>
<body>
<div id="wrap">
<div id="tit">
<span class="select">标题1</span>
<span>标题2</span>
<span>标题3</span>
</div>
<ul id="con">
<li class="show">
<div id="tab_01" >
<div class="widget-header widget-header-flat">
<h4>相关日志1
<!-- <a class="btn btn-primary" href="${ctx}/main/equipment/gotoAddEquipment">添加设备</a> -->
</h4>
</div>
<div class="widget-body">
<div class="widget-main">
<div class="row">
<table id="grid-table_log"></table>
<div id="grid-pager_log"></div>
</div>
</div>
</div>
</div>
</li>
<li>
<div id="tab_01" >
<div class="widget-header widget-header-flat">
<h4>相关日志2
<!-- <a class="btn btn-primary" href="${ctx}/main/equipment/gotoAddEquipment">添加设备</a> -->
</h4>
</div>
<div class="widget-body">
<div class="widget-main">
<div class="row">
<table id="grid-table_log"></table>
<div id="grid-pager_log"></div>
</div>
</div>
</div>
</div>
</li>
<li><div id="tab_01" >
<div class="widget-header widget-header-flat">
<h4>相关日志3
<!-- <a class="btn btn-primary" href="${ctx}/main/equipment/gotoAddEquipment">添加设备</a> -->
</h4>
</div>
<div class="widget-body">
<div class="widget-main">
<div class="row">
<table id="grid-table_log"></table>
<div id="grid-pager_log"></div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<script>
$(document).ready(function(){
$(this).addClass('select').siblings().removeClass('select');
$('#con li').eq(1).show().siblings().hide();
})
$('#tit span').click(function() {
var i = $(this).index();//下标第一种写法
//var i = $('tit').index(this);//下标第二种写法
$(this).addClass('select').siblings().removeClass('select');
$('#con li').eq(i).show().siblings().hide();
});
</script>
</body>
</html>