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><!--以类似键值对的形式,设置好名字和连接字符串--><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 一、文件对象 我理解的文件对象就是一个接口,通过这个接口对文件进行相关操作。 《Python 核心编程》上说的很晦涩,这里没有深刻理解到,希望有人能解释给我听。 >>> f open(d…

[微信小程序]组件化开发,以一个自定义模块框组件当做示例(附完整示例代码和效果图)
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 正文: 自定义组件我把它分为简单的三个步骤, 1.创建组件 --- 2.编写组件 --- 3.调用,使用组件. 第一步:创建组件 创建一个modal文件夹,里面包含 josn.wxml.wcss.js 四个文件,然后在jo…

openstack安装在虚拟机上重启之后无法启动问题
http://www.byywee.com/page/M0/S931/931767.html 运行rejoin-stack.sh脚本的核心: exec screen -c $TOP_DIR/stack-screenrc stack-screenrc文件存储启动的信息: 例如trove的启动 screen -t tr-api bash stuff "/usr/local/bin/trove-api --config…

让我们讨论一下变量,以及为什么要在JavaScript中使用它们。
by Zell Liew由Zell Liew 让我们讨论一下变量,以及为什么要在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(服务)
开启服务有两种方式: 如果不会可以看老师的百度音乐盒的案例1、start方式:start方式的生命周期:*服务只会被开启一次,直到用户手动停止 服务才会被销毁*开启需要调用startService 会执行onCreate(),onStartCommand() *注&…

[敏捷开发实践](2) 用于开发和维持复杂产品的敏捷开发框架Scrum
[敏捷开发实践](2) 用于开发和维持复杂产品的敏捷开发框架Scrum 1,Scrum概述 上篇中提到敏捷开发有两种主流的方法,一个是XP,另一个是Scrum,本篇简要介绍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.我非常感谢为一些开源项目做出了贡献,其中包括我目前定期使用的两个项目: Ruby o…

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

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 初步了解:使用JavaScript进行表达式(De Do Do Do,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必须要设置宽度; 如:{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 承接微信小程序开发。扫码加微信。 正文: <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关于后台挂起的消息接收,后台消息推送,本地发送通知
想问下,在xmpp即时通讯的项目中,我程序如果挂起了,后台有消息过来,我这边的推送不过来,所以我的通知就会收不到消息,当我重新唤醒应用的时候,他才会接收到通知,消息就会推送过来&…

[冲昏头脑]IDEA中的maven项目中学习log4j的日志操作
第一,你要有log4j的对应的包,由于我用的maven,所以直接在pom.xml文件依赖下载则可,如你尚为有此包,请自行百度下载导入,或上http://www.mvnrepository.com/搜索。上如则是我的log4j的包的版本。好了&#x…

女神推荐, 卡片,广告图 ,点击查看更多
微信小程序开发交流qq群 581478349 承接微信小程序开发。扫码加微信。 正文: <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窗口的置顶显示,可以用于某些程序的消息提示,能够弹出到桌面显示 root Tk() root.wm_attributes(-topmost,1) 转载于:https://www.cnblogs.com/shuchengxiang/p/6632140.html
用Quartus II Timequest Timing Analyzer进行时序分析 :实例讲解 (一)
一,概述 用Altera的话来讲,timequest timing analyzer是一个功能强大的,ASIC-style的时序分析工具。采用工业标准--SDC(synopsys design contraints)--的约束、分析和报告方法来验证你的设计是否满足时序设计的要求。在…

软件工程与软件测试基础知识_这是我在软件工程工作九个月中学到的知识
软件工程与软件测试基础知识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个人,每个人都有一个标号,每种标号的人只能看见下一个标号的人(最后一种标号看见第一种),给定m个关系,求这个关系是否合法以及合法情况下最大和最小的方案数。$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…