当前位置: 首页 > 编程日记 > 正文

JQ实现导航效果(附效果图)

微信小程序开发交流qq群   581478349

   承接微信小程序开发。扫码加微信。

正文:

为了不浪费大家时间, 首先来一张效果图看是不是你需要的

下面是完整的代码和详细的注释. 直接copy就可以用了.

html

		<div id="tab" class="tab"><div id="1" class="">商品详情</div><div id="2" class="">商品参数</div></div><div id="btn_1" class="">我显示商品详情了</div><div id="btn_2" class="">我显示商品参数了</div>

js

	<script type="text/javascript">$(document).ready(function() {$('#1').addClass('on');  $('#btn_1').show(); 	$('#btn_2').hide();});						//页面加载的时候给第一个导航添加一样式, 显示id为btn_1的元素,隐藏id为btn_2的元素$('#tab div').click(function(){console.log(this.id)  				//通过点击事件获取当前元素的id$(this).siblings('div').removeClass('on'); 		//获取当前节点的同级的div元素并移除on样式$(this).addClass('on');   			//给当前节点添加on样式if (this.id ==1) {$('#btn_1').show();$('#btn_2').hide();} else{$('#btn_2').show();$('#btn_1').hide();}})</script>

css

.tab{display: flex;
}
.tab div{width: 50%;text-align: center;height: 30px;line-height: 30px;
}
.on{color: red;border-bottom: 1px solid red;
}

相关文章:

.NET如何从配置文件中获取连接字符串

一.设置配置文件 <configuration><!--在configuration下创建一个connectionStrings--><connectionStrings><!--以类似键值对的形式&#xff0c;设置好名字和连接字符串--><add name"连接名" connectionString"连接字符串"/>…

javascript 代码_如何使您JavaScript代码保持简单并提高其可读性

javascript 代码by Leonardo Lima莱昂纳多利马(Leonardo Lima) 如何使您JavaScript代码保持简单并提高其可读性 (How to keep your JavaScript code simple and increase its readability) After a few years working almost exclusively with Ruby on Rails and some jQuery,…

《转》Python学习(14)-对文件的操作(一)

转自 http://www.cnblogs.com/BeginMan/p/3166644.html 一、文件对象 我理解的文件对象就是一个接口&#xff0c;通过这个接口对文件进行相关操作。 《Python 核心编程》上说的很晦涩&#xff0c;这里没有深刻理解到&#xff0c;希望有人能解释给我听。 >>> f open(d…

[微信小程序]组件化开发,以一个自定义模块框组件当做示例(附完整示例代码和效果图)

微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 正文&#xff1a; 自定义组件我把它分为简单的三个步骤, 1.创建组件 --- 2.编写组件 --- 3.调用,使用组件. 第一步:创建组件 创建一个modal文件夹,里面包含 josn.wxml.wcss.js 四个文件,然后在jo…

openstack安装在虚拟机上重启之后无法启动问题

http://www.byywee.com/page/M0/S931/931767.html 运行rejoin-stack.sh脚本的核心&#xff1a; exec screen -c $TOP_DIR/stack-screenrc stack-screenrc文件存储启动的信息&#xff1a; 例如trove的启动 screen -t tr-api bash stuff "/usr/local/bin/trove-api --config…

让我们讨论一下变量,以及为什么要在JavaScript中使用它们。

by Zell Liew由Zell Liew 让我们讨论一下变量&#xff0c;以及为什么要在JavaScript中使用它们。 (Let’s talk about variables — and why you should use them in JavaScript.) The main purpose of coding is to solve problems. For example, what happens when you clic…

Services(服务)

开启服务有两种方式&#xff1a; 如果不会可以看老师的百度音乐盒的案例1、start方式&#xff1a;start方式的生命周期&#xff1a;*服务只会被开启一次&#xff0c;直到用户手动停止 服务才会被销毁*开启需要调用startService 会执行onCreate(),onStartCommand() *注&…

[敏捷开发实践](2) 用于开发和维持复杂产品的敏捷开发框架Scrum

[敏捷开发实践]&#xff08;2&#xff09; 用于开发和维持复杂产品的敏捷开发框架Scrum 1&#xff0c;Scrum概述 上篇中提到敏捷开发有两种主流的方法&#xff0c;一个是XP&#xff0c;另一个是Scrum&#xff0c;本篇简要介绍Scrum方法。Scrum是一套开发和维护复杂产品的框架或…

js 实现多选框(复选框) 和单选框,下拉框功能完整示例代码附效果图

<!DOCTYPE html> <html><head><meta charset"utf-8" /><script src"http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script><title>单选框,复选框,下拉菜单简单示例</title></head…

ruby on rails_我成为了Ruby on Rails和React的贡献者,你也可以

ruby on railsI am really grateful to have contributed to a few open source projects, including two I currently use on a regular basis: Ruby on Rails and React.我非常感谢为一些开源项目做出了贡献&#xff0c;其中包括我目前定期使用的两个项目&#xff1a; Ruby o…

MySQL加密算法

1.不可逆加密&#xff1a; PASSWORD()&#xff0c;ENCRYPT(&#xff0c;)&#xff0c;MD5()&#xff0c;SHA5()。 2.可逆的加密算法&#xff1a; ENCODE(,) DECODE(,)&#xff1a;加密解密字符串。该函数有两个参数&#xff1a;被加密或解密的字符串和作为加密或解密基础的密…

js回调函数和函数带参数的使用示例

微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 //demo1 <html><head><meta charset"UTF-8"><script src"http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script></head>&…

mvc-3模型和数据(1)

MVC和命名空间 var User function(atts) {this.attribute atts || {}; } //和具体user相关的方法 User.prototype.destroy function() {}; //和具体user不相关的函数和变量 User.fetchRemove function() {}; var user new User({name:jinks}); user.destroy();构建对象关系…

初步了解:使用JavaScript进行表达式(De Do Do Do,De Da Da Da)

by Donavon West由Donavon West 初步了解&#xff1a;使用JavaScript进行表达式(De Do Do Do&#xff0c;De Da Da Da) (A first look: do expressions in JavaScript (De Do Do Do, De Da Da Da)) This article is not about about the The Police’s 1980 hit song from alb…

div 下 的img水平居中

设置text-align:center; 这个div必须要设置宽度&#xff1b; 如&#xff1a;{text-align:center; width:100%;}转载于:https://www.cnblogs.com/zzd0916/p/6626772.html

Understanding SOAP

Understanding SOAP转载于:https://www.cnblogs.com/daishuguang/p/4227983.html

js删除组数中的某一个元素(完整代码附效果图)

微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 正文&#xff1a; <view class"big-logos"> <imagebindtap"addimg"src../../../image/s.png></image> <blockwx:for"{{img_arr}}"wx:key"in…

c专家编程/c陷阱_如何避免常见的初学者陷阱并像专家一样开始编码

c专家编程/c陷阱by Dmitri Grabov德米特里格拉波夫(Dmitri Grabov) 如何避免常见的初学者陷阱并像专家一样开始编码 (How to avoid common beginner pitfalls and start coding like a pro) Learning to code is tough. We’ve all encountered cryptic errors and code break…

xmpp关于后台挂起的消息接收,后台消息推送,本地发送通知

想问下&#xff0c;在xmpp即时通讯的项目中&#xff0c;我程序如果挂起了&#xff0c;后台有消息过来&#xff0c;我这边的推送不过来&#xff0c;所以我的通知就会收不到消息&#xff0c;当我重新唤醒应用的时候&#xff0c;他才会接收到通知&#xff0c;消息就会推送过来&…

[冲昏头脑]IDEA中的maven项目中学习log4j的日志操作

第一&#xff0c;你要有log4j的对应的包&#xff0c;由于我用的maven&#xff0c;所以直接在pom.xml文件依赖下载则可&#xff0c;如你尚为有此包&#xff0c;请自行百度下载导入&#xff0c;或上http://www.mvnrepository.com/搜索。上如则是我的log4j的包的版本。好了&#x…

女神推荐, 卡片,广告图 ,点击查看更多

微信小程序开发交流qq群 581478349 承接微信小程序开发。扫码加微信。 正文&#xff1a; <view><view classtitle>女神推荐 </view> <image stylemargin-top:25rpx; classtab_img src{{img list_data.q1[1].image}}></image><view classv…

aws lambda_恐怕您正在考虑AWS Lambda的冷启动完全错误

aws lambdaby Yan Cui崔燕 恐怕您正在考虑AWS Lambda的冷启动完全错误 (I’m afraid you’re thinking about AWS Lambda cold starts all wrong) When I discuss AWS Lambda cold starts with folks in the context of API Gateway, I often get responses along the line of…

python tkinter窗口弹出置顶的方法

加上下面两句即可实现root窗口的置顶显示&#xff0c;可以用于某些程序的消息提示&#xff0c;能够弹出到桌面显示 root Tk() root.wm_attributes(-topmost,1) 转载于:https://www.cnblogs.com/shuchengxiang/p/6632140.html

用Quartus II Timequest Timing Analyzer进行时序分析 :实例讲解 (一)

一&#xff0c;概述 用Altera的话来讲&#xff0c;timequest timing analyzer是一个功能强大的&#xff0c;ASIC-style的时序分析工具。采用工业标准--SDC&#xff08;synopsys design contraints&#xff09;--的约束、分析和报告方法来验证你的设计是否满足时序设计的要求。在…

软件工程与软件测试基础知识_这是我在软件工程工作九个月中学到的知识

软件工程与软件测试基础知识I’ve been working for about nine months at Dexter as a software developer. I wrote a blog post about landing the job initially, as well as a technical post about a self positioning component I made in my first couple of months at…

[bzoj1064][Noi2008]假面舞会

题意:有n个人&#xff0c;每个人都有一个标号&#xff0c;每种标号的人只能看见下一个标号的人&#xff08;最后一种标号看见第一种&#xff09;&#xff0c;给定m个关系&#xff0c;求这个关系是否合法以及合法情况下最大和最小的方案数。$n\leqslant 10^{5},m\leqslant 10^{6…

js取一定范围内的随机整数

Math.floor(Math.random()*305 1); Math.random()*305 的作用是取0到305的随机数 加1 就是1到305的随机数, Math.floor是取整数, 所以最后的结果是0到305的随机整数 微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。

AE,按照属性值关系选择要素

if(axMapControl2.LayerCount<0) { MessageBox.Show("请加载图层后使用该功能","系统提示",MessageBoxButtons.OK,MessageBoxIcon.Warning); } else { ILayer pLayer axMapControl2.get_Layer(0); IFeatureLayer pFeatureLayer pLayer as IFeatureLay…

aws lambda使用_如何使用AWS Lambda和S3构建无服务器URL缩短器

aws lambda使用by Daniel Ireson丹尼尔埃里森(Daniel Ireson) 如何使用AWS Lambda和S3构建无服务器URL缩短器 (How to build a Serverless URL shortener using AWS Lambda and S3) Throughout this post we’ll be building a serverless URL shortener using Amazon Web Ser…

android -volley-请求数据

private List<gson.DataBean>arrGson;//请求的数据 //请求数据的方法 public void initData() { RequestQueue mQueue Volley.newRequestQueue(getApplicationContext()); String url "http://www.fashions88.com/you/HBooks88/GetBooks88Data…