用js做点击切换携程旅游

样式:

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>

效果:

相关推荐
hepherd3 分钟前
Flask学习笔记 - 模板渲染
前端·flask
LaoZhangAI3 分钟前
【2025最新】Manus邀请码免费获取完全指南:5种稳定渠道+3个隐藏方法
前端
经常见5 分钟前
浅拷贝与深拷贝
前端
FanetheDivine8 分钟前
正确使用flex-1
css·html
梅子酱~9 分钟前
Vue 学习随笔系列二十二 —— 表格高度自适应
javascript·vue.js·学习
前端飞天猪10 分钟前
学习笔记:三行命令,免费申请https加密证书📃
前端
关二哥拉二胡11 分钟前
前端的 AI 应用开发系列二:手把手揭秘 RAG
前端·面试
斯~内克13 分钟前
前端图片加载性能优化全攻略:并发限制、预加载、懒加载与错误恢复策略
前端·性能优化
你的人类朋友14 分钟前
JS严格模式,启动!
javascript·后端·node.js
奇怪的知识又增长了22 分钟前
Command SwiftCompile failed with a nonzero exit code Command SwiftGeneratePch em
前端