效果圖如下：

css程式碼如下：

*{
			margin: 0;
			padding: 0;
		}
		.obox ul li{
			list-style: none;
			width: 100px;
			height: 30px;
			text-align: center;
			line-height: 30px;
			border: 1px solid #E5E5E5;
			float: left;
		}
		.tabCla div{
			width:408px ;
			height: 300px;
			border: 1px solid #E5E5E5;
			display: none;
		}
		.tabCla img{
			width:408px ;
			height: 300px;
		}
		.tabCla .active{
			display: block;
		}
 

html程式碼如下：

<div class="obox">
			
			<ul>
				<li>詩歌</li>
				<li>名人</li>
				<li>圖片</li>
				<li>小零食</li>
			</ul>
			
			<div class="tabCla">
				<div class="active">枯藤老樹昏鴉，小橋流水人家，古道西風瘦馬，夕陽西下，斷腸人在天涯</div>
				<div>李白， 賈玲， 趙麗穎， 翠花</div>
				<div> <img src="img/1.jpg" /> </div>
				<div>衛龍，唐僧肉，深海炸彈，大大泡泡糖 </div>
				
			</div>
			
			
		</div>
 

jquery程式碼如下：

	$("ul li").on("click",function(){
			
			//獲取索引值 
			var index=$(this).index()
			console.log(index)
			
			$(".tabCla div").eq(index).show().siblings().hide()
			
			
		})