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

效果:

相关推荐
兜小糖的小秃毛12 分钟前
两段文本比对,高亮出差异部分
linux·前端·javascript
佛系菜狗21 分钟前
element-ui、element-plus表单resetFields()无效的坑
前端·javascript·vue.js
爱的叹息42 分钟前
【前端】基于 Promise 的 HTTP 客户端工具Axios 详解
前端·网络·网络协议·http
热水养鲨鱼1 小时前
Java实现HTML转PDF(deepSeekAi->html->pdf)
人工智能·pdf·html
遗憾随她而去.1 小时前
从 0 开始认识 WebSocket:前端实时通信的利器!
前端·websocket·网络协议
老兵发新帖1 小时前
pnpm常见报错解决办法
前端
Sonetto19992 小时前
Nginx 反向代理,啥是“反向代理“啊,为啥叫“反向“代理?而不叫“正向”代理?它能干哈?
运维·前端·nginx
沐土Arvin2 小时前
理解npm的工作原理:优化你的项目依赖管理流程
开发语言·前端·javascript·设计模式·npm·node.js
好_快2 小时前
Lodash源码阅读-baseUniq
前端·javascript·源码阅读
不秃的开发媛2 小时前
前端技术Ajax入门
java·开发语言·前端