切换面板、卡片

1.css样式

#tab {
	overflow:hidden;
	margin-left: -40px!important;
}
#tab li{
	float:left;
	color:#000;
	height:30px;    
	cursor:pointer;    
	line-height:30px;
	/*padding:0 20px;*/
	list-style: none;
}
#tab li:hover{
	color: #f00;
}
#tab .showed {
	color:#f00;
}
#tab   span{
	color:#000;
}
.content .div_show{
	display:table;
}
.content div{
	display: none;
}

2.页面布局

<div class="row c-add-search">
	<div class="tab">
		<ul  id="tab">
			<li   class="showed">订单查询<span>|</span></li>
			<li  style="padding-left: 5px">客户查询<span>| </span></li>
			<li   style="padding-left: 5px">微信查询<span> </span></li>
		</ul>
	</div>
	<div class="content searchbox">
		<div class="input-group div_show">
			<input type="text" class="form-control"  placeholder="请输入订单号" name="order">
			<span class="input-group-btn">
				<button class="btn btn-default" type="button" onclick="SearchInfo(1)">查询</button>
			</span>
		</div>
		<div class="input-group" >
			<input type="text" class="form-control" name="customer" placeholder="请输入客户ID">
			<span class="input-group-btn">				
				<button class="btn btn-default" type="button" onclick="SearchInfo(2)">查询</button>
			</span>
		</div>
		<div class="input-group">
			<input type="text" class="form-control" id="weixinhao"  placeholder="请输入客户微信号">
			<span class="input-group-btn">
				<button class="btn btn-default" type="button" onclick="SearchInfo(3)">查询</button>
			</span>				
		</div>
	</div>
</div>

3.jquery./js代码

 $('ul li').click(function(event) {
		$(this).addClass('showed');
		$(this).siblings().removeClass('showed');
		let that = $('.searchbox div').eq($(this).index()+1);
		that.addClass('div_show');
		that.siblings().removeClass('div_show');
	})

4，实现效果如下