前端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为我们 ...
随机推荐
- resin中关于url rewrite来传递jsessionid的问题
最近两天在项目中碰到,一个很奇怪的问题.同一个账号多次切换登录时,会出现这个账号的信息在session中找不到,虽然可以登录成功,但是之后这个用户信息好像没有保存到session中一样,或者是被改变了 ...
- Lua面向对象 --- 继承
工程结构: BasePlayer.lua: BasePlayer = {} BasePlayer.root = "BasePlayer" function BasePlayer:S ...
- vsftpd配置手册(实用)
作者: 木頭 来源: PHPChina 开源社区门户1.vsftpd配置参数详细整理 #接受匿名用户 anonymous_enable=YES #匿名用户login时不询问口令 no_anon_ ...
- (转)理解TIME_WAIT,彻底弄清解决TCP: time wait bucket table overflow
转载自http://blog.51cto.com/benpaozhe/1767612: 一直对这个问题知其然而不知其所以然,这些日子再次碰到,看了很多的资料,彻底解决一下,呵呵,先上个图,所有理解围绕 ...
- 『PyTorch x TensorFlow』第八弹_基本nn.Module层函数
『TensorFlow』网络操作API_上 『TensorFlow』网络操作API_中 『TensorFlow』网络操作API_下 之前也说过,tf 和 t 的层本质区别就是 tf 的是层函数,调用即 ...
- CSS单位分析
px:单位代表像素,1px代表一个像素点. %:设置子元素为父容器的占比. em:代表该元素中一个字体所占字符,常用在文字首行缩进.其具有继承性. rem:始终代表html中的字符所在位置. vm:1 ...
- python-day64--web框架
http协议. 一.HTTP简介 1.HTTP协议是Hyper Text Transfer Protocol(超文本传输协议)的缩写,是用于从万维网(WWW:World Wide Web )服务器传输 ...
- php表单提交安全方法
1.$_SERVER["PHP_SELF"] 将表单数据发送到页面本身,而不是跳转到另一张页面.这样,用户就能够在表单页面获得错误提示信息.2.通过使用 htmlspecialch ...
- zzuli 1484 继续双线
1484: 探 寻 宝 藏 Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 94 Solved: 52 SubmitStatusWeb Board De ...
- shell里的/dev/null 2>&1详解
shell中可能经常能看到: >/dev/null 2>&1 命令意思是:标准输出stdout 和标准错误输出stderr 也重定向到空设备文件,即不显示输出信息 分解这个组合:“ ...