样式:
javascript
<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:
javascript
<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">
<img
alt="黄山"
src="http://img.elongstatic.com/index/termini/dgtq-hs.jpg"
/>
</div>
<div class="city_name">黄山</div>
</a>
</li> -->
</ul>
</div>
js
javascript
<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].data
let str = ''
for (let i = 0; i < ary.length; i++) {
str += `
<li>
<a href="#">
<div class="pic_add">
<img
alt="${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>