<!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. Android中的广播基本实现及回调方法的理解

    在Android中broadcast这一节的内容其实不算多主要是牵扯到一个broadcastreceiver类,这个类是一个抽象类,下面有一个抽象方法onreceiver(),可以再我们收到网络状态变 ...

  2. P1659 [国家集训队]拉拉队排练

    思路 求出cnt和len之后,直接乘起来即可 代码 #include <cstdio> #include <algorithm> #include <cstring> ...

  3. 一些Java基础方面问题的总结

    1.Overloaded的方法是否可以改变返回值的类型? 答案:可以. overload是重载,overloaded是什么?重载的过去式?我还以为是我没见过的注解,也没有给限定条件,代码测试一下. p ...

  4. mongodb常用的sql语句总结

    本文为博主原创,转载请注明出处: 1 .  查询所有 db.getCollection('CollectionName').find() 2.根据条件查询 db.getCollection('Coll ...

  5. SQL server中如何按照某一字段中的分割符将记录拆成多条

    现需要将上结果转换为下结果 上结果查询语句:SELECT TOP 1 id,domain FROM dbo.SimpleTask 下结果转换语句:SELECT  a.Id,b.domain FROM ...

  6. Linux操作系统的VI命令

    Linux操作系统的VI命令 VI是Linux系统的一个文本编辑器,该编辑器可以通过使用VI命令来操作,从而完成对文本的编辑.熟练掌握一些常用的VI命令,可以大大简化编辑操作并提高操作Linux文本的 ...

  7. 用《捕鱼达人》去理解C#中的多线程

    线程是进程中某个单一顺序的控制流,是程序运行中的调度单位,是程序执行流的最小单位,一个标准的线程由线程ID,当前指令指针(PC),寄存器集合和堆栈组成. 线程自己不拥有系统资源,只拥有一点儿在运行中必 ...

  8. Vue-admin工作整理（十一）：Vuex-动态注册模块

    概述: 动态注册模块分为两种,一种是在根state下注册一个模块,一种是在模块下再自动注册一个模块 第一种:根state下动态注册模块: 思路:通过store来实现,this.$store来获取当前的 ...

  9. Vue-admin工作整理（一）：项目搭建

    1.首先要安装vue-cli 3.0以上版本,和git 该版本可以支持页面化快速创建: sudo npm install -g @vue/cli 安装完毕后查看vue版本信息:vue -V 2.安装好 ...

  10. 肿瘤数据库除了TCGA，还有TCIA--转载

    TCIA就是基于TCGA数据开发的,不同的是TCIA只提供了20个癌种的免疫数据分析. 看网站首页的介绍就知道,这个数据库主要是根据TCGA的二代测序数据开发出来的.这里的20个癌种,点击每个柱子进去 ...