导航菜单点击图片切换--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 ...
随机推荐
- Java基础学习-Eclipse综述和运算符的使用
1.Eclipse的概述(磨刀不误砍柴工) -Eclipse是一个IDE(集成开发环境) -IDE(Intergrated Development Environment) ...
- 论文笔记：Siamese Cascaded Region Proposal Networks for Real-Time Visual Tracking
Siamese Cascaded Region Proposal Networks for Real-Time Visual Tracking 2019-03-20 16:45:23 Paper:ht ...
- 【我的前端自学之路】【HTML5】Web Socket
以下为自学笔记内容,仅供参考. 转发请保留原文链接:https://www.cnblogs.com/it-dennis/p/10508118.html 什么是Web Socket WebSocket ...
- 动态生成具有嵌套属性的linq选择(select)
class SelectItem { public string Item { get; set; } } class SelectList { public int ID { get; set; } ...
- IDEA ----Apachemaven连接私服，mavenWed工程 、以及Tomcat配置和项目的部署
1.Apachemaven连接私服, 首相先下载Apachemaven文件(压缩包和解压后的) 打开maven下的conf文件下的settin.xml, 配置setting.xml文件 其他信息随便写 ...
- 意外get接近完美的黑苹果 (UEFI + GPT)
本人大学生一枚,对于高大上的 MAC OS 只能是摸摸口袋 咽咽口水啦.听说黑苹果,就是安装在普通的 pc 上的 MAC系统,那么对应的苹果电脑上的 MAC OS 系统就为白苹果了. 个人也想啃一口黑 ...
- 原生js点击按钮切换图片
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 二、volatile关键字 - 内存可见性
1.内存可见性 (程序在运行时,jvm会为每一个执行任务的线程都分配一个独立的缓存,用于提高效率) 我觉得可以这样来理解: 内存:啥是内存?就是可以理解成电脑当中的内存条,程序创建个变量, ...
- ios和android 浏览器适配问题总结
转自 https://blog.csdn.net/wcy7916/article/details/83345705
- shiro框架-配置
才开始学没有什么理解分享一个博客写的比较详细 借鉴大佬的:https://www.cnblogs.com/maofa/p/6407102.html@阿发仔 https://blog.csdn.net ...