用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>

效果:

相关推荐
SUPER526624 分钟前
FastApi项目启动失败 got an unexpected keyword argument ‘loop_factory‘
java·服务器·前端
sanx1834 分钟前
专业电竞体育数据与系统解决方案
前端·数据库·apache·数据库开发·时序数据库
你的人类朋友3 小时前
【Node】认识一下Node.js 中的 VM 模块
前端·后端·node.js
Cosolar3 小时前
FunASR 前端语音识别代码解析
前端·面试·github
@大迁世界5 小时前
Vue 设计模式 实战指南
前端·javascript·vue.js·设计模式·ecmascript
芭拉拉小魔仙6 小时前
Vue项目中如何实现表格选中数据的 Excel 导出
前端·vue.js·excel
jump_jump6 小时前
妙用 localeCompare 获取汉字拼音首字母
前端·javascript·浏览器
U.2 SSD6 小时前
Echarts单轴坐标系散点图
前端·javascript·echarts
不做无法实现的梦~6 小时前
jetson刷系统之后没有浏览器--解决办法
开发语言·javascript·ecmascript
德育处主任Pro6 小时前
前端玩转大模型,DeepSeek-R1 蒸馏 Llama 模型的 Bedrock 部署
前端·llama