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

效果:

相关推荐
y先森4 分钟前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy4 分钟前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189117 分钟前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿1 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡2 小时前
commitlint校验git提交信息
前端
emmm4592 小时前
html兼容性问题处理
html
虾球xz3 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇3 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒3 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员3 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js