前端jquery学习--03
1、tab切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.item{
width: 300px;
background-color: #2459a2;
height:38px;
line-height: 38px;
}
.menu{
float:left;
border-right:1px solid blue;
padding: 10px;
color: white;
cursor: pointer;
}
.hide{
display: none;
}
.active{
background-color: blue;
}
</style>
</head>
<body> <div class="item">
<div class="menu active">菜单一</div>
<div class="menu">菜单二</div>
<div class="menu">菜单三</div>
</div> <div class="content">
<div class="info">内容一</div>
<div class="info hide">内容二</div>
<div class="info hide">内容三</div>
</div> <script src="jquery.js"></script>
<script>
$(".menu").click(function(){
var i = $(this).index();
$(this).addClass('active').siblings().removeClass('active');
$(".info").eq(i).show().siblings().hide();
});
</script>
</body>
</html>
前端jquery学习--03的更多相关文章
- 前端jQuery学习(一)
把最近学习的前端框架jQuery整理一下.你可能听说过jQuery,因为他是JavaScript世界中使用最广泛的一个库. 江湖传言,全世界大约有80~90%的网站直接或间接地使用了jQuery.鉴于 ...
- jQuery 学习03——HTML:捕获、设置、添加元素、删除元素、CSS类、CSS()方法、尺寸
jQuery - 获取内容text().html() 以及 val()和属性attr() jQuery 中非常重要的部分,就是操作 DOM 的能力. DOM = Document Object Mod ...
- web前端开发学习:jQuery的原型中的init
web前端开发学习:jQuery的原型中的init 有大量web前端开发工具及学习资料,可以搜群[ web前端学习部落22群 ]进行下载,遇到学习问题也可以问群内专家以及课程老师哟 jQuery.fn ...
- python学习之路前端-jQuery
jQuery简介 JQuery是继prototype之后又一个优秀的Javascript库.它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF1.5+, Safa ...
- 大量Javascript/JQuery学习教程电子书合集
[推荐分享]大量Javascript/JQuery学习教程电子书合集,送给有需要的人 不收藏是你的错^_^. 经证实,均可免费下载. 资源名称 资源大小 15天学会jQuery(完整版).pd ...
- [推荐分享]大量Javascript/JQuery学习教程电子书合集,送给有需要的人
不收藏是你的错^_^. 经证实,均可免费下载. 资源名称 资源大小 15天学会jQuery(完整版).pdf 274.79 KB 21天学通JavaScript(第2版)-顾宁燕扫描版.pdf ...
- web前端开发学习内容
应该 具备的 知识技能 :懂web标准,熟练手写 xhtml css3 并符合 符合w3c标准 代码能 兼容主流浏览器.ie6.7.8.9 ff 等. ...
- Web前端的学习介绍(截止今天还有Bootstrap没有学,要腾点时间解决掉)
Web前端的学习分为以下几个阶段,具体的学习路线图如图所示. 第一阶段——HTML的学习 超文本标记语言(HyperText Mark-up Language 简称HTML)是一个网页的骨架,无论是静 ...
- web前端的学习误区
web前端的学习误区 网页制作是计算机专业同学在大学期间都会接触到的一门课程,而学习网页制作所用的第一个集成开发环境(IDE)想必大多是Dreamweaver,这种所见即所得的“吊炸天”IDE为我们 ...
随机推荐
- php--------对象(object) 与 数组(array) 的转换
php开发中常常用到数组,sql数据都是数组,数组和对象用的也是比较多的,常常相互转化,数组是PHP的灵魂,非常强大,面向对象编程也是挺方便的. /** * 数组 转 对象 * * @param ar ...
- php--------php库生成二维码和有logo的二维码
php生成二维码和带有logo的二维码,上一篇博客讲的是js实现二维码:php--------使用js生成二维码. 今天写的这个小案例是使用php库生成二维码: 效果图: 使用了 php ...
- android--------自定义Dialog之信息提示
对话框对于应用也是必不可少的一个组件,在Android中也不例外,对话框对于一些提示重要信息,或者一些需要用户额外交互的一些内容很有帮助. 自定义Dialog步骤: 1.主要创建Java类,并继承Di ...
- springboot实现java代理IP池 Proxy Pool,提供可用率达到95%以上的代理IP
一.背景 前段时间,写java爬虫来爬网易云音乐的评论.不料,爬了一段时间后ip被封禁了.由此,想到了使用ip代理,但是找了很多的ip代理网站,很少有可以用的代理ip.于是,抱着边学习的心态,自己开发 ...
- codefroces 450B矩阵快速幂
找出递推关系式就好了 (fi+1)=(1 -1)(fi ) ( fi)=(1 0)(fi-1) 不会打矩阵将就着看吧... 这是第一道矩阵快速幂.细节还是有很多没注意到的 本来想看挑战写 ...
- zzuli1985(dp/水dfs郑轻比赛)
再一次感受到dp的威力 1985: 即将到来的新生赛 Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 112 Solved: 28 SubmitStat ...
- 关于最短路的想法&&问题
今天本想水几道floyd却被坑了:注意考虑<重边>!!!!!!!!!!!!!!! 小心图里出现的重边,如果不处理的话,必然WA!构图时一定要仔细!
- POJ-2689 Prime Distance (两重筛素数,区间平移)
Prime Distance Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 13961 Accepted: 3725 D ...
- Tomcat类加载器破坏双亲委派
转载:https://blog.csdn.net/qq_38182963/article/details/78660779 http://www.cnblogs.com/aspirant/p/8991 ...
- nginx支持返回相对路径
一.问题:http://192.168.72.4/bm-crm/ 局域网可以访问[实际指向了192.168.80.1:8081/brm-crm] http://59.41.111.24:8280/b ...