tab栏切换(纵向)

最新推荐文章于 2022-01-18 21:48:58 发布

weixin_lqq

最新推荐文章于 2022-01-18 21:48:58 发布

阅读量530

点赞数

分类专栏：笔记文章标签： css html

本文链接：https://blog.csdn.net/weixin_52119040/article/details/120231866

版权

笔记专栏收录该内容

45 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="box">
    <div class="left">
      <div class="item">女靴</div>
      <div class="item">雪地靴</div>
      <div class="item">冬裙</div>
      <div class="item">女包</div>
      <div class="item">毛衣</div>
      <div class="item">棉服</div>
      <div class="item">女裤</div>
      <div class="item">羽绒服</div>
      <div class="item">皮带</div>
    </div>
    <div class="right">
      <img src="imgs/女靴.jpg" alt="">
      <img src="imgs/雪地靴.jpg" alt="" style="display: none">
      <img src="imgs/冬裙.jpg" alt="" style="display: none">
      <img src="imgs/女包.jpg" alt="" style="display: none">
      <img src="imgs/毛衣.jpg" alt="" style="display: none">
      <img src="imgs/棉服.jpg" alt="" style="display: none">
      <img src="imgs/女裤.jpg" alt="" style="display: none">
      <img src="imgs/羽绒服.jpg" alt="" style="display: none">
      <img src="imgs/皮带.jpg" alt="" style="display: none">
    </div>
  </div>

  <script src="./js/jquery-3.6.0.js"></script>
  <script> 
    // 鼠标进入左边选项卡.当前选项卡背景改变,颜色改变
      $('.item').on('mouseenter',function () {
        $(this).css({
          'background':'url(./imgs/abg.gif)',
          'color':'#fff'
        })
        //相应图片显示,其余图片隐藏
        let i = $(this).index()
        $('img').eq(i).show().siblings().hide()
        
      })

      // 鼠标离开选项卡,当前item背景清除,字体颜色清除
      $('.item').on('mouseleave',function () {
        $(this).css({
          'background':'',
          'color':''
        })
        })
  </script>
</body>

</html>

<style>
* {
  margin        : 0;
  padding       : 0;
  list-style    : none;
  vertical-align: middle;
}

.box {
  width   : 250px;
  height  : 250px;
  border  : 1px solid red;
  margin  : 50px auto;
  overflow: hidden;
}

.left {
  float       : left;
  width       : 50px;
  height      : 250px;
  border-right: 1px solid red;
  box-sizing  : border-box;
}

.left .item {
  width        : 100%;
  height       : 28px;
  border-bottom: 1px solid red;
  box-sizing   : border-box;
  text-align   : center;
  line-height  : 28px;
  background-image: linear-gradient(to bottom,
      #fff,
      pink);
  cursor: pointer;
}

.right {
  width   : 200px;
  height  : 250px;
  float   : left;
  position: relative;
}

.right img {
  position: absolute;
}
</style>

weixin_lqq

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
tab栏切换(纵向)

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l
复制链接

扫一扫