jQuery解決方案列表tab切換代碼

使用方法：

1、head引入css文件

<link rel="stylesheet" type="text/css" href="statics/css/style.css" />

2、head引入js文件

<script src="statics/js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>

3、body引入HTML代碼

<div class="bg-blue">
	<div class="developer-solution-block">
		<div class="titleBar">
			<h3 class="caption">解決方案</h3>

			<p class="descript">提供高效的解決方案，滿足廣泛的業(yè)務(wù)需求</p>
		</div>
		<div class="developer-solution">
			<div class="solution-tab">
				<ul>
					<li class="active" data-item="item01">軟件實(shí)訓(xùn)解決方案</li>
					<li data-item="item02" class="">游戲開發(fā)解決方案</li>
					<li data-item="item03">電商雙交付解決方案</li>
				</ul>
			</div>
			<div class="solution-detail">
				<ul>
					<li class="item01 active">
						<div class="title">
							軟件實(shí)訓(xùn)解決方案
						</div>
						<p class="detail">
							云端一站式軟件教學(xué)與實(shí)踐平臺(tái)，為學(xué)生提供企業(yè)級(jí)的軟件項(xiàng)目開發(fā)實(shí)踐體驗(yàn)，方便老師開展軟件實(shí)訓(xùn)教學(xué)、全面掌握學(xué)生軟件開發(fā)能力
						</p>
						<a class="more-btn " href="#">查看更多</a>
					</li>
					<li class="item02">
						<div class="title">
							游戲開發(fā)解決方案
						</div>
						<p class="detail">
							云主機(jī)一站式游戲研發(fā)平臺(tái)，貫穿游戲開發(fā)、測(cè)試和運(yùn)維的產(chǎn)品全生命周期
						</p>
						<a class="more-btn " href="#">查看更多</a>
					</li>
					<li class="item03">
						<div class="title">
							電商雙交付解決方案
						</div>
						<p class="detail">
							基于雙交付理念，在向客戶交付電商應(yīng)用時(shí)，同步交付全套云上環(huán)境
						</p>
						<a class="more-btn " href="#">查看更多</a>
					</li>
				</ul>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript">
$(function() {
	$('.developer-solution .solution-tab ul li').each(function() {
		$(this).hover(function() {
			$('.developer-solution .solution-tab ul li').removeClass('active');
			$('.developer-solution .solution-detail ul li').removeClass('active');
			$(this).addClass('active');
			$('.' + $(this).attr('data-item')).addClass('active');
		});
	});
})
</script>