jquery手风琴显示图片

Ctrl_CV攻城狮

已于 2023-07-12 17:10:00 修改

阅读量74

点赞数

分类专栏：前端基础文章标签： jquery

于 2021-10-21 22:52:52 首次发布

本文链接：https://blog.csdn.net/m0_57823924/article/details/120896712

版权

前端基础专栏收录该内容

27 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>手风琴显示图片2</title>
    <script src="../js/jquery-3.3.1.js"></script>
    <script>
        $(function () {
            //当鼠标移入文字的时候，文字变为白色 对应的图片显示 其余图片隐藏
            //console.log($('a'));
            $('a').mouseover(function () {
                //移除所有a的样式
                console.log($('a'));
                $('a').removeClass('active');
                //给当前这个a添加样式
                $(this).addClass('active');
                //让所有的a的下一个元素，也就是a隐藏
                console.log($('a').next());
                $('a').next().hide();
                //当前a的下一个元素，也就是img的样式
                $(this).next().show();
            })

        })

    </script>
   <style>
      * {
          margin: 0;
          padding: 0;
      }

      li {
          list-style: none;
      }

      a {
          text-decoration: none;
          color: #000;
      }

      ul li a {
          display: block;
          float: left;
          width: 28px;
          height: 300px;
          background-color: pink;
          text-align: center;


      }

      img {
          float: left;
          width: 300px;
          height: 300px;
          display: none;
      }

       .active{
           color: #fff;
       }
   </style>
</head>
<body>
<ul>
    <li><a href="">第一张图片显示效果</a><img src="../img/1.jpg" style="display: block"></li>
    <li><a href="">第二张图片显示效果</a><img src="../img/2.jpg"></li>
    <li><a href="">第三张图片显示效果</a><img src="../img/3.jpg"></li>
    <li><a href="">第四张图片显示效果</a><img src="../img/4.jpg"></li>
    <li><a href="">第五张图片显示效果</a><img src="../img/5.jpg"></li>
</ul>
</body>

Ctrl_CV攻城狮

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery手风琴显示图片

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>手风琴显示图片2</title> <script src="../js/jquery-3.3.1.js"></script> <script> $(function () { //当鼠标移入.
复制链接

扫一扫