[JavaScript知识库] jquery手风琴显示图片

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> jquery手风琴显示图片 -> 正文阅读

[JavaScript知识库]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 () {
            //当鼠标移入文字的时候，文字变为白色 对应的图片显示 其余图片隐藏
            //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>

JavaScript知识库最新文章

ES6的相关知识点

react 函数式组件 & react其他一些总结

Vue基础超详细

前端JS也可以连点成线（Vue中运用 AntVG6）

Vue事件处理的基本使用

Vue后台项目的记录（一）

前后端分离vue跨域，devServer配置proxy代理

TypeScript

初识vuex

vue项目安装包指令收集