导航菜单点击图片切换--jquery

<!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的更多相关文章

HTML中动态图片切换JQuery实现
相信很多同学都注意到了,各大新闻或者娱乐网站都含有动态图片切换,那个漂亮的感觉让刚刚学习html的人,都非常好奇和心动.那下面就让我们看一下到底如何实现动态图片切换呢?看一下百度贴吧的效果图吧~ // ...
用js实现导航菜单点击切换选中时高亮状态
随着用户点击导航或菜单上不同的页面,出现此选项高亮显示或变为一个新的样式是经常用到的.实现它所用的原理就是通过js中的location.href得到当前页面的地址,然后在与导航上的链接地址匹对,相同的 ...
用js实现超链接导航菜单点击切换选中时的状态
项目中使用到点解导航切换不同的颜色,如果只是li选项卡还好办,这次用到的超链接选项卡,因为a链接每次点击都会刷新,所以浏览器记不住点击的状态,也没法切换点击状态,因为项目中有好多地方要用到,在网上找了 ...
vue-router + ElementUI实现NavMenu 导航菜单选中状态的切换
elemen-ui官方网站:http://element.eleme.io/#/zh-CN/component/menu 新手小白利用vue+element-ui尝试搭建后台管理系统, 效果是这样的, ...
vue 实现active点击图片切换
循环条件下: 1.点击函数@click="active(index)" 获取点击的位置 2.讲索引值传给class,点击哪一个则显示哪一个的样式 3.在data添加ins的初始值 ...
2018.7.2 如何用js实现点击图片切换为另一图片，再次点击恢复到原图片
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...
基于jquery鼠标点击图片翻开切换效果
基于jquery鼠标点击图片翻开切换效果是一款基于jQuery+CSS3实现的点击图片切换特效.效果图如下: 在线预览源码下载实现的代码. html代码: <div class=&quo ...
18款非常实用 jquery幻灯片图片切换
1.jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动 jquery图片特效制作仿腾讯QQ商城首页banner焦点图片轮播切换效果,带索引按钮控制和左右按钮控制图片切换. 查看演示>& ...
一款jquery编写图文下拉二级导航菜单特效
一款jquery编写图文下拉二级导航菜单特效,效果非常简洁大气,很不错的一款jquery导航菜单特效. 这款jquery特效适用于很多的个人和门户网站. 适用浏览器:IE8.360.FireFox.C ...

随机推荐

JSP页面静态包含和动态包含的区别与联系
---恢复内容开始--- JSP页面静态包含和动态包含的区别与联系: 1.<%@ include file=" " %> 是指令元素,<jsp:include p ...
浅谈RESTful
浅谈RESTful 什么是RESTful? REST全称是Representational State Transfer,中文意思是表述(编者注:通常译为表征)性状态转移. 它首次出现在2000年Ro ...
Java基础学习-Eclipse综述和运算符的使用
1.Eclipse的概述(磨刀不误砍柴工) -Eclipse是一个IDE(集成开发环境) -IDE(Intergrated Development Environment) ...
关于PHP5.6连接SqlServer
在做一个PHP报名系统的时候需要使用mssql来和winform结合起来使用, 但是发现我的php环境没有sqlsrv模块,于是乎,我就开始百度了找到了微软官方下载地址,对照php版本,下载对应的模 ...
JS高程关于ajax的学习笔记
1.ajax介绍 ajax技术可以实现浏览器向服务器请求数据时不需要重新加载页面,就可以从服务器中获取需要的数据. ajax技术的核心是XMLHttpRequest对象(简称XHR),XHR对象为向服 ...
【新特性】JDK1.9
一.目录结构 JDK9具体目录结构如下所示: bin: 该目录包含所有的命令. conf: 包含用户可以编辑的配置文件,例如以前位于jre\lib 目录中的.properties 和 .policy ...
grep 从文件内容中查找
grep -rin [查找目标] [查找范围] 例子:在当前目录下的文件内查找test字符串 grep -rin test ./
crop image 需要的基础知识
refer : https://www.youtube.com/watch?v=R7dObDtw1aA https://www.shuxuele.com/algebra/trig-finding-an ...
extract method
函数简短,命名良好函数名描述的是做什么而不是怎么做行数过高的代码中将一大段做一个事的代码提取到独立的method 中高层函数直接引用. 创建新函数将提炼的代码平移到目标函数中检查是否引 ...
MariaDB主从复制,redis发布订阅,持久化,以及主从同步
一. MariaDB主从复制 mysql基本操作 1 连接数据库 mysql -u root -p -h 127.0.0.1 mysql -u root -p -h 192.168.12.60 2 ...

导航菜单点击图片切换--jquery

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

随机推荐

热门专题