js動態創建標簽，並設置樣式。

RT

style

<style type="text/css">
			.content .miniNav{
				    position: relative;
				    width: 100%;
				    height: auto;
				    border-bottom: 1px solid #e5e5e5;
				    background: transparent;
				    z-index: 10;
			}
			.box{
				margin-top: 18px;
				margin-bottom: 18px;
			}
			.box a{
				cursor: pointer;
				display: inline-block;
				color: #333;
				text-decoration: none;
			}
			.ziliao,.ziliaoList,.fiveLine{
				font-size: 14px;
			}
			.box .item {
				padding: 5px 6px;
				margin: 5px 22px;
				line-height: 22px;
				display: inline-block;
				color: #333;
				text-decoration: none;
			}
			.box .item--active {
				padding: 5px 6px;
				border-radius: 2px;
				margin: 5px 22px;
				color: #fff !important;
				background: #fc2328;
				box-shadow: 2px 2px 5px rgba(0, 0, 0, .05);
			}
			.box .des{
				color: #aaa;
				font-weight: 600;
			}
		</style>

html

<div class="miniNav">
			<!-- 篩選 -->
			<div class="box">
				<div class="ziliao">
					<span class="des">全部資料</span>
				</div>
				<div class="ziliaoList">
					<span class="des fenlei">資料分類</span>
				</div>
				<div class="fiveLine"></div>
			</div>
		</div>

js

<script type="text/javascript">
			//獲取地址欄url
			var URL = location.href	
			//jq ajax 請求
			$.ajax({
				url: 'http://www.xiaoma.com/channel_ajax.php?'+URL,
				type: 'post',
				data: {},
				dataType: 'json'
			}).then(function(res) {
				console.log(res,444);
				//把從json獲取的數據賦值給空數組
				var str = ''
				var str2 = ''
				var str3 = ''
				var defaultThirdId = res.defaultThirdId
				var defaultFourId = res.defaultFourId
				var defaultFiveId = res.defaultFiveId
				//先判斷該層是否有數據
				if(res.thirdData.length!=0){
				$.each(res.thirdData,function(index,element){
				     if (element.id==defaultThirdId) {
				     	 str +="<a class='item item--active'  href="+element['typedir']+">"+element['typename']+"</a>"
				     } else{
				     	 str +="<a class='item'  href="+element['typedir']+">"+element['typename']+"</a>"
				     }
				})
				}
				//先判斷該層是否有數據
				if(res.fourData.length!=0){
				$.each(res.fourData,function(index,element){
					if (element.id==defaultFourId) {
						 str2 +="<a class='item item--active'  href="+element['typedir']+">"+element['typename']+"</a>"
					} else{
						 str2 +="<a class='item'  href="+element['typedir']+">"+element['typename']+"</a>"
					}
				})
				}
				if(res.fiveData.length!=0){
				$.each(res.fiveData,function(index,element){
						if (element.id==defaultFiveId) {
							 str3 +="<a class='item item--active'  href="+element['typedir']+">"+element['typename']+"</a>"
						} else{
							 str3 +="<a class='item'  href="+element['typedir']+">"+element['typename']+"</a>"
						}
				})
				}
				//遍歷完成之后掛上去
				$('.ziliao').append(str)
				$('.ziliaoList').append(str2)
				$('.fiveLine').append(str3)
			}).fail(function() {
				console.log('獲取數據失敗');
			})
		</script>