<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            *{ margin: 0; padding: 0; -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;}

            .hide{display: none;}

            /***左侧菜单栏***/

            .left-nav{

                position: absolute;

                top: 0;

                left: 0;

                z-index: 99;

                width: 86px;

                height:100%;

                background-color: #333;

            }

            .left-nav .item{

                width: 100%;

                height: 104px;

                padding: 20px 0 12px;

            }

            .left-nav .item:hover{

                background-color: #42515f;

            }

            .left-nav .item a{

                display: inline-block;

                width: 100%;

                height: 72px;

                text-align: center;

            }

            /***右侧主体内容***/

            .right-main{

                width: 100%;

                height:100%;

                padding-left: 86px;

            }

            .mainContent{

                width: 100%;

                height: 100%;

                padding: 20px;

            }

        </style>

    </head>

    <body>

        <div class="left-nav ">

            <div class="item">

                <a href="javascript:;"><img src="img/ch0.png" alt=""/></a>

            </div>

            <div class="item">

                <a href="javascript:;"><img src="img/ch1.png" alt=""/></a>

            </div>

            <div class="item">

                <a href="javascript:;"><img src="img/ch2.png" alt=""/></a>

            </div>

            <div class="item">

                <a href="javascript:;"><img src="img/ch3.png" alt=""/></a>

            </div>

            <div class="item">

                <a href="javascript:;"><img src="img/ch4.png" alt=""/></a>

            </div>

            <div class="item">

                <a href="javascript:;"><img src="img/ch5.png" alt=""/></a>

            </div>

        </div>

        <div class="right-main ">

            <div class="mainContent ">

                1

            </div>

            <div class="mainContent hide">

                2

            </div>

            <div class="mainContent hide">

                3

            </div>

            <div class="mainContent hide">

                4

            </div>

            <div class="mainContent hide">

                5

            </div>

            <div class="mainContent hide">

                6

            </div>

        </div>

        <script src="js/jquery-1.7.min.js" type="text/javascript" charset="utf-8"></script>

        <script type="text/javascript">

            //左侧内容切换

            $(".left-nav .item").click(function () {

                var index = $(".left-nav .item").index(this);

                var $Img = $(".left-nav img");

                var imgTxt = "<img src='img/left" + index + ".png' alt='' />";

                $(this).css("background", "#fff").siblings().css("background", "#333");

                $(".mainContent").eq(index).removeClass("hide").show().siblings().hide();

                $Img.eq(index).replaceWith(imgTxt);

                $(this).siblings().each(function () {

                    var $Imgs = $(this).find("img");

                    var Ind = $(".left-nav .item").index(this);

                    $Imgs.attr("src", "img/ch" + Ind + ".png");

                });

            });

        </script>

    </body>

</html>

结构图：

效果图：

导航菜单点击图片切换--jquery的更多相关文章

  1. HTML中动态图片切换JQuery实现

    相信很多同学都注意到了,各大新闻或者娱乐网站都含有动态图片切换,那个漂亮的感觉让刚刚学习html的人,都非常好奇和心动.那下面就让我们看一下到底如何实现动态图片切换呢?看一下百度贴吧的效果图吧~ // ...

  2. 用js实现导航菜单点击切换选中时高亮状态

    随着用户点击导航或菜单上不同的页面,出现此选项高亮显示或变为一个新的样式是经常用到的.实现它所用的原理就是通过js中的location.href得到当前页面的地址,然后在与导航上的链接地址匹对,相同的 ...

  3. 用js实现超链接导航菜单点击切换选中时的状态

    项目中使用到点解导航切换不同的颜色,如果只是li选项卡还好办,这次用到的超链接选项卡,因为a链接每次点击都会刷新,所以浏览器记不住点击的状态,也没法切换点击状态,因为项目中有好多地方要用到,在网上找了 ...

  4. vue-router + ElementUI实现NavMenu 导航菜单 选中状态的切换

    elemen-ui官方网站:http://element.eleme.io/#/zh-CN/component/menu 新手小白利用vue+element-ui尝试搭建后台管理系统, 效果是这样的, ...

  5. vue 实现active点击图片切换

    循环条件下: 1.点击函数@click="active(index)" 获取点击的位置 2.讲索引值传给class,点击哪一个则显示哪一个的样式 3.在data添加ins的初始值 ...

  6. 2018.7.2 如何用js实现点击图片切换为另一图片，再次点击恢复到原图片

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  7. 基于jquery鼠标点击图片翻开切换效果

    基于jquery鼠标点击图片翻开切换效果是一款基于jQuery+CSS3实现的点击图片切换特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=&quo ...

  8. 18款 非常实用 jquery幻灯片图片切换

    1.jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动 jquery图片特效制作仿腾讯QQ商城首页banner焦点图片轮播切换效果,带索引按钮控制和左右按钮控制图片切换. 查看演示>& ...

  9. 一款jquery编写图文下拉二级导航菜单特效

    一款jquery编写图文下拉二级导航菜单特效,效果非常简洁大气,很不错的一款jquery导航菜单特效. 这款jquery特效适用于很多的个人和门户网站. 适用浏览器:IE8.360.FireFox.C ...

随机推荐

  1. cookie的存入和取出

    刚刚开始写页面没多久,因为登录注册写的是个tab切换,所以需要在点击登录的时候跳到登录页面,点击注册的时候跳转到注册页面,自己在网上找了一下,研究了一下cookie方法,现在把它记下来. 存入cook ...

  2. 生成式对抗网络（GAN）学习笔记

    图像识别和自然语言处理是目前应用极为广泛的AI技术,这些技术不管是速度还是准确度都已经达到了相当的高度,具体应用例如智能手机的人脸解锁.内置的语音助手.这些技术的实现和发展都离不开神经网络,可是传统的 ...

  3. week1总结

    week1总结 1. 开发上线工具流程以及规范类 规范: css注释:/* Comment Text*/ Css嵌套选择器:请不要让嵌套选择器的深度超过 3 层! 再说一遍: 永远不要嵌套 ID 选择 ...

  4. matlab从曲线图提取数据

    同学用肉体一顿饭让我帮他做下这个DDL 样图是一张非常扭曲的三虚线图他甚至想OCR识别x轴y轴坐标单位 上谷歌查了查,对于曲线图提取数据基本上是手动在曲线上取几个点,然后由这个几个点开始遍历领域点,判 ...

  5. Cocos Creator学习六：加载/释放图片资源

    1.目的:学习加载图片资源.使用图片资源创建对象以及释放图片资源. 2.注意事项以及主要函数: ①注意事项:使用loadRes函数,资源必须放置在assets下的resources文件夹下(默认没有r ...

  6. 腾讯云centos7.2安装宝塔面板和LAMP

    1.安装好centos7.2系统后,登录centos系统输入如下命令: yum install -y wget && wget -O install.sh http://downloa ...

  7. opencv的一些功能代码

    opencv调用摄像头 #include<opencv2/opencv.hpp> using namespace cv; void main(){ VideoCapture cap; ca ...

  8. .NET Core WEB API使用Swagger生成在线接口文档

    1项目引用Swashbuckle.AspNetCore程序集和Microsoft.Extensions.PlatformAbstractions程序集 右击项目打开"管理NuGet程序包.. ...

  9. Educational Codeforces Round 53 (Rated for Div. 2)G. Yet Another LCP Problem

    题意:给串s,每次询问k个数a,l个数b,问a和b作为后缀的lcp的综合 题解:和bzoj3879类似,反向sam日神仙...lcp就是fail树上的lca.把点抠出来建虚树,然后在上面dp即可.(感 ...

  10. HIT2019春软件构造->重写hashCode()方法

    不需要重写equals方法: 1.     一个类的每一个实例本质上都是唯一的. 2.     不关心一个类是否提供了“逻辑相等”的测试功能 3.     超类已经改写了equals方法,并且从超类继 ...