<!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. php登录注册

    php 登录注册 注册代码:register.php <style type="text/css"> form{ width:300px; background-col ...

  2. Linux 搭建DNS

    Linux 搭建DNS 使用yum源安装 yum -y install bind* 修改主配置文件 [root@localhost ~]# cp /etc/named.conf /etc/named. ...

  3. java中的构造器

    构造器是什么 1.构造器,也称构造方法.构造函数.作用是构造出来一个类的实例,确保对象得到初始化. 2.构造器的格式: 权限修饰符 类名(无参/有参){}. 3.根据有无参数,可分为无参构造 和有参构 ...

  4. swift 有道 翻译文档(1 定义变量常量,数组字典)

    使用let来创建常量,使用var来创建变量.一个常量的值在编译时不需要知道,但是您必须为它指定一个值一次.这意味着您可以使用常量来命名一个您确定一次的值,但是在许多地方使用它.var myVariab ...

  5. ubuntu使用抓包工具，charles

    参考官网:https://www.charlesproxy.com/documentation/installation/apt-repository/ wget -q -O - https://ww ...

  6. Python开发 基础篇

    2019-02-01 产生验证码: 用户输入的值和显示的值相同时显示Correct,否则继续生成随机验证码等待用户输入 def check_code(): import random checkcod ...

  7. 20190407 Word合并单元格

    很长一段时间没处理word合并单元格,又忘记了采取忽略错误的方式测试出相应单元格的行列坐标这种方式.真是浪费时间.以后再也不想为此在深夜熬命. 今晚算是和它杠上了,很想弄清楚合并单元格之后行列坐标重新 ...

  8. flutter -------- GridView的使用

    使用GridView将widget放置为二维列表. GridView提供了两个预制list,或者您可以构建自定义网格.当GridView检测到其内容太长而不适合渲染框时,它会自动滚动. GridVie ...

  9. selenium、UA池、ip池、scrapy-redis的综合应用案例

    案例: 网易新闻的爬取: https://news.163.com/ 爬取的内容为一下4大板块中的新闻内容 爬取: 特点: 动态加载数据  ,用 selenium 爬虫 1. 创建项目 scrapy ...

  10. 新版seqseq接口说明

    attention_mechanism = tf.contrib.seq2seq.BahdanauAttention(num_units=FLAGS.rnn_hidden_size, memory = ...