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

时间：2023-02-09 10:26:23
<!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

效果图：

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

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

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

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

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

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

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

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

  4. vue-router &plus; 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&period;7&period;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 位运算（&amp&semi;&comma; &vert;&comma; &Hat;&comma; ~&comma; &lt&semi;&lt&semi;&comma; &gt&semi;&gt&semi;）及 PHP错误级别报告设置（error&lowbar;reporting） 详解

    位运算符允许对整型数中指定的位进行求值和操作. 位运算符 例子 名称 结果 $a & $b And(按位与) 将把 $a 和 $b 中都为 1 的位设为 1. $a | $b Or(按位或) ...

  2. Blogging with github Pages

    参考: 阮大大:搭建一个免费的,无限流量的Blog----github Pages和Jekyll入门 使用BitBucket和FTPloy私有Jekyll源码 http://www.pchou.inf ...

  3. &lt&semi;&lt&semi;测试驱动开发的艺术&gt&semi;&gt&semi;读书笔记

    TDD通过边测试边编写代码,然后重构来防止重构所引起的错误 通过自动化测试和持续集成工具,随时保持可以发布 TDD第一步: 1. 需求分解 2. 将需求转化成测试 3. 写一个失败的测试 4. 逐步通 ...

  4. C&num;复习⑨（附带C&num;参考答案仅限参考）

    C#复习⑨ 2016年6月22日 14:28 C#考试题&参考答案:http://pan.baidu.com/s/1sld4K13 Main XML Comments & Pointe ...

  5. ScrollView嵌套recyclerView出现的滑动问题

    记得以前在解决scrollView与ListView嵌套问题时,那个时候是自定义了listView去测量listView高度,今天项目中刚 好碰到了要用recycerView,同样也是嵌套在scrol ...

  6. 文件&colon;一个任务 - 零基础入门学习Python029

    文件:一个任务 让编程改变世界 Change the world by program 一个任务 这节课,我们需要一起来完成一个任务:将文件(record.txt)中的数据进行分割并按照以下规律保存起 ...

  7. 关于NetBeans IDE的配置优化

    首先,IDE的版本最好对应着JDK的版本. NetBeans优化的目的是提高NetBeans的启动速度和运行速度.下面介绍的NetBeans优化技巧是在版本6.0beta2上的优化.经过实验,大大提高 ...

  8. Python第三方库安装技巧

    pytho下有三种安装第三方库方法: 1.通过easy_install安装 2.通过Pip安装 前面两种,由于受国内部门网站原因,如果安装失败,可采用接下来的第三种方法 3.在指定网站下载安装 第三方 ...

  9. java九九乘法表

    public class Nine { public static void main(String[] args) { //外层循环控制行数 for (int i = 9;i >=1;i--) ...

  10. 递归算法结合数据库 解析 java树形结构

    1.准备表结构及对应的表数据a.表结构: create table TB_TREE ( CID NUMBER not null, CNAME VARCHAR2(50), PID NUMBER //父节 ...

相关文章