使用html css js 书写tab切换

html

<div class="i-recommend-main">
	<ul class="i-re-menu">
		<li class="on" data="i-icon-r01"><span>内容</span></li>
		<li data="i-icon-r02"><span>条件</span></li>
		<li data="i-icon-r03"><span>时机</span></li>
		<li data="i-icon-r04"><span>预警</span></li>
	</ul>

	<!-- 1 -->
	<div class="i-recommend-box" data="i-icon-r01" style="display: block">
						你好1
	</div>

	<!-- 2 -->
	<div class="i-recommend-box" data="i-icon-r02">
						你好2
	</div>
	<!-- 3 -->
	<div class="i-recommend-box" data="i-icon-r03">
						你好3
	</div>
	<!-- 4-->
	<div class="i-recommend-box" data="i-icon-r04">
						你好4
	</div>
</div>

css

.i-recommend-main {
	padding: 30px;
	background-color: #fff;
	border-radius: 10px;
	margin-top: 30px;
}
.i-recommend-box{
	display: none;
}

.i-re-menu {
	overflow: hidden;
}

.i-re-menu li {
	width: 195px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	color: #666;
	margin-right: 1%;
	float: left;
	background-color: #f5f9fa;
	border-radius: 10px;
	border: 1px solid #f5f9fa;
}

.i-re-menu li span {
	padding-left: 30px;
}

.i-re-menu li.on {
	color: #96d0ff;
	border: 1px solid #96d0ff;
}

js

                var showBox = $(".i-recommend-box");
                var menuLi = $('.i-re-menu li');
                menuLi.on("click",function(){
                	$(this).addClass('on').siblings('li').removeClass('on'); 
					var liData = $(this).attr("data");
					for (var i = 0; i < showBox.length; i++) {
                       var showBoxData = $(showBox[i]).attr("data");
                       if (liData == showBoxData) {
                       	  $(showBox[i]).show().siblings(".i-recommend-box").hide();
                       }
					}
                })