JSFiddle - React, Tailwind, and code Playground

by chong zi

HTML

<!-- view -->
<template>
	<set-title title="标题"></set-title>
	<div class="case">
		<div class="t">
			<h1>成功案例</h1>
		</div>
		<div class="panel">
			<ul>
				<li v-for="(key,item) in anlis" :class="{on:item.en === currentEn}">
					<strong @click="currnetEn = item.en)">{{item.name}}</strong>
					<div>
			      <span v-for="sub in item.list"><a>{{sub.name}}</a></span>
		      </div>
				</li>
			</ul>
		</div>
		
	</div>
</template>

<script>
module.exports = {
	showMenu:true,
	data:function(){
		return {
			currentEn:'',
			anlis:[]
		}
	},
	route:{
		data:function(transition){
			this.anlis = window.wsData.anli;
	}
} 
</script>

CSS

.case ul li{
    display: inline-block;
		vertical-align: top;
		width: 25%;
     height:200px;
		box-sizing: border-box;
		position:relative;
 }
.case ul li.on strong + div{
    display: block;
}

JavaScript

var wxData = {
	anli:[
				    {
				        "en":"fangchan",
				        "name":"房产",
				        "list":[
				            {"index":0,"dir":9,"name":"影像馆"},
				            {"index":1,"dir":8,"name":"置业直通车"},
				            {"index":2,"dir":7,"name":"保利地产"},
				            {"index":3,"dir":6,"name":"万科广场"},
				            {"index":4,"dir":5,"name":"武汉有氧青年"},
				            {"index":5,"dir":4,"name":"通州万达广场"},
				            {"index":6,"dir":3,"name":"凯里中心城"},
				            {"index":7,"dir":2,"name":"海派新天地"},
				            {"index":8,"dir":1,"name":"九华学府"}
				        ]
				    },
				    {
				        "en":"jiaoyu",
				        "name":"教育",
				        "list":[
				            {"index":0,"dir":9,"name":"锦阳南山中学双语学校"},
				            {"index":1,"dir":8,"name":"北京第166中学"},
				            {"index":2,"dir":7,"name":"棠湖中学"},
				            {"index":3,"dir":6,"name":"DulwichBeijing"},
				            {"index":4,"dir":5,"name":"英语庄园"},
				            {"index":5,"dir":4,"name":"远播国际教育"},
				            {"index":6,"dir":3,"name":"东方瑞通"},
				            {"index":7,"dir":2,"name":"文圣蒲香"},
				            {"index":9,"dir":1,"name":"卡酷七色光方庄分部"}
				        ]
				    },
				    {
				        "en":"lvyou",
				        "name":"旅游",
				        "list":[
				            {"index":0,"dir":9,"name":"乐途旅游网"},
				            {"index":1,"dir":8,"name":"狼牙山旅游"},
				            {"index":2,"dir":7,"name":"途牛国内旅游"},
				            {"index":3,"dir":6,"name":"同程旅游"},
				            {"index":4,"dir":5,"name":"永乐票务"},
				            {"index":5,"dir":4,"name":"签证宝"},
				            {"index":6,"dir":3,"name":"中国国旅"},
				            {"index":7,"dir":2,"name":"万国通"},
				            {"index":8,"dir":1,"name":"吾爱社区"}
				        ]
				    },
				    {
				        "en":"meirong",
				        "name":"美容",
				        "list":[
				            {"index":0,"dir":9,"name":"四季康美"},
				            {"index":1,"dir":8,"name":"CMM郑明明"},
				           ...