样式：
<style>.domestic {width: 1200px;margin: 50px auto;}.domestic span {padding: 2px 10px;margin: 10px 10px;border-radius: 12px;cursor: pointer;float: left;border: 1px solid transparent;}.domestic > div span:hover {border-color: #f66;background: #fff;color: #f66;}.domestic span.active {background: #f66;color: #fff;}.tab_theme {margin: 0;padding: 0;width: 1220px;height: 202px;list-style: none;}.tab_theme > li {float: left;width: 293px;margin: 0 10px 0 0;overflow: hidden;position: relative;}.tab_theme > li img {display: block;width: 100%;margin-top: -20px;position: relative;bottom: 0;-webkit-transiton: bottom 0.3s;transition: bottom 0.3s;}.tab_theme .city_name {position: absolute;color: #fff;top: 130px;left: 0;font-size: 30px;text-indent: 0.5em;text-shadow: 1px 1px 7px #000;}.clearfix:after {content: '';display: block;height: 0;clear: both;visibility: hidden;}</style>
html:
<div class="domestic"><div class="clearfix"><span class="active">登高踏青</span><span>小憩温泉</span><span>天然氧吧</span><span>草原撒欢</span></div><ul class="tab_theme"><!-- <li><a href="#"><div class="pic_add"><imgalt="黄山"src="http://img.elongstatic.com/index/termini/dgtq-hs.jpg"/></div><div class="city_name">黄山</div></a></li> --></ul></div>
js
<script>const arr = [{data: [{name: '黄山',url: 'http://img.elongstatic.com/index/termini/dgtq-hs.jpg',},{name: '峨眉山',url: 'http://img.elongstatic.com/index/termini/dgtq-ems.jpg',},{name: '五台山',url: 'http://img.elongstatic.com/index/termini/dgtq-wts.jpg',},{name: '庐山',url: 'http://img.elongstatic.com/index/termini/dgtq-ls.jpg',},],},{data: [{name: '江苏天目湖',url: 'http://img.elongstatic.com/index/termini/hbtl-tianmuhu.jpg',},{name: '威海天沐威海温泉',url: 'http://img.elongstatic.com/index/termini/hbtl-tianmuweihai.jpg',},{name: '广东中山温泉',url: 'http://img.elongstatic.com/index/termini/hbtl-zhongshan.jpg',},{name: '辽宁大连安波温泉',url: 'http://img.elongstatic.com/index/termini/hbtl-anbo.jpg',},],},{data: [{name: '拉萨',url: 'http://img.elongstatic.com/index/termini/hbtl-lasa.jpg',},{name: '大理',url: 'http://img.elongstatic.com/index/termini/hbtl-dali.jpg',},{name: '舟山',url: 'http://img.elongstatic.com/index/termini/hbtl-zhoushan.jpg',},{name: '厦门',url: 'http://img.elongstatic.com/index/termini/hbtl-xiamen.jpg',},],},{data: [{name: '锡林郭勒',url: 'http://img.elongstatic.com/index/termini/cysh-xlgl.jpg',},{name: '坝上',url: 'http://img.elongstatic.com/index/termini/cysh-bs.jpg',},{name: '若尔盖',url: 'http://img.elongstatic.com/index/termini/cysh-reg.jpg',},{name: '祁连山',url: 'http://img.elongstatic.com/index/termini/cysh-qls.jpg',},],},]// 获取所有tab栏const spans = document.querySelectorAll('.domestic span')// 循环绑定事件for (let i = 0; i < spans.length; i++) {spans[i].addEventListener('click', function () {// 让自己高亮 其余移除document.querySelector('.domestic .active').classList.remove('active')this.classList.add('active')// 图片切换render(i)})}function render(index) {const ary = arr[index].datalet str = ''for (let i = 0; i < ary.length; i++) {str += `<li><a href="#"><div class="pic_add"><imgalt="${ary[i].name}"src="${ary[i].url}"/></div><div class="city_name">${ary[i].name}</div></a></li>`}document.querySelector('.tab_theme').innerHTML = str}render(0)</script>
效果：
