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的更多相关文章

  1. 前端jQuery学习(一)

    把最近学习的前端框架jQuery整理一下.你可能听说过jQuery,因为他是JavaScript世界中使用最广泛的一个库. 江湖传言,全世界大约有80~90%的网站直接或间接地使用了jQuery.鉴于 ...

  2. jQuery 学习03——HTML:捕获、设置、添加元素、删除元素、CSS类、CSS()方法、尺寸

    jQuery - 获取内容text().html() 以及 val()和属性attr() jQuery 中非常重要的部分,就是操作 DOM 的能力. DOM = Document Object Mod ...

  3. web前端开发学习:jQuery的原型中的init

    web前端开发学习:jQuery的原型中的init 有大量web前端开发工具及学习资料,可以搜群[ web前端学习部落22群 ]进行下载,遇到学习问题也可以问群内专家以及课程老师哟 jQuery.fn ...

  4. python学习之路前端-jQuery

    jQuery简介      JQuery是继prototype之后又一个优秀的Javascript库.它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF1.5+, Safa ...

  5. 大量Javascript/JQuery学习教程电子书合集

    [推荐分享]大量Javascript/JQuery学习教程电子书合集,送给有需要的人   不收藏是你的错^_^. 经证实,均可免费下载. 资源名称 资源大小   15天学会jQuery(完整版).pd ...

  6. [推荐分享]大量Javascript/JQuery学习教程电子书合集,送给有需要的人

    不收藏是你的错^_^. 经证实,均可免费下载. 资源名称 资源大小   15天学会jQuery(完整版).pdf 274.79 KB   21天学通JavaScript(第2版)-顾宁燕扫描版.pdf ...

  7. web前端开发学习内容

    应该 具备的 知识技能 :懂web标准,熟练手写 xhtml css3 并符合 符合w3c标准                       代码能 兼容主流浏览器.ie6.7.8.9 ff 等.    ...

  8. Web前端的学习介绍(截止今天还有Bootstrap没有学,要腾点时间解决掉)

    Web前端的学习分为以下几个阶段,具体的学习路线图如图所示. 第一阶段——HTML的学习 超文本标记语言(HyperText Mark-up Language 简称HTML)是一个网页的骨架,无论是静 ...

  9. web前端的学习误区

    web前端的学习误区  网页制作是计算机专业同学在大学期间都会接触到的一门课程,而学习网页制作所用的第一个集成开发环境(IDE)想必大多是Dreamweaver,这种所见即所得的“吊炸天”IDE为我们 ...

随机推荐

  1. resin中关于url rewrite来传递jsessionid的问题

    最近两天在项目中碰到,一个很奇怪的问题.同一个账号多次切换登录时,会出现这个账号的信息在session中找不到,虽然可以登录成功,但是之后这个用户信息好像没有保存到session中一样,或者是被改变了 ...

  2. Lua面向对象 --- 继承

    工程结构: BasePlayer.lua: BasePlayer = {} BasePlayer.root = "BasePlayer" function BasePlayer:S ...

  3. vsftpd配置手册(实用)

    作者: 木頭    来源: PHPChina 开源社区门户1.vsftpd配置参数详细整理 #接受匿名用户 anonymous_enable=YES #匿名用户login时不询问口令 no_anon_ ...

  4. (转)理解TIME_WAIT,彻底弄清解决TCP: time wait bucket table overflow

    转载自http://blog.51cto.com/benpaozhe/1767612: 一直对这个问题知其然而不知其所以然,这些日子再次碰到,看了很多的资料,彻底解决一下,呵呵,先上个图,所有理解围绕 ...

  5. 『PyTorch x TensorFlow』第八弹_基本nn.Module层函数

    『TensorFlow』网络操作API_上 『TensorFlow』网络操作API_中 『TensorFlow』网络操作API_下 之前也说过,tf 和 t 的层本质区别就是 tf 的是层函数,调用即 ...

  6. CSS单位分析

    px:单位代表像素,1px代表一个像素点. %:设置子元素为父容器的占比. em:代表该元素中一个字体所占字符,常用在文字首行缩进.其具有继承性. rem:始终代表html中的字符所在位置. vm:1 ...

  7. python-day64--web框架

    http协议. 一.HTTP简介 1.HTTP协议是Hyper Text Transfer Protocol(超文本传输协议)的缩写,是用于从万维网(WWW:World Wide Web )服务器传输 ...

  8. php表单提交安全方法

    1.$_SERVER["PHP_SELF"] 将表单数据发送到页面本身,而不是跳转到另一张页面.这样,用户就能够在表单页面获得错误提示信息.2.通过使用 htmlspecialch ...

  9. zzuli 1484 继续双线

    1484: 探 寻 宝 藏 Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 94  Solved: 52 SubmitStatusWeb Board De ...

  10. shell里的/dev/null 2>&1详解

    shell中可能经常能看到: >/dev/null 2>&1 命令意思是:标准输出stdout 和标准错误输出stderr 也重定向到空设备文件,即不显示输出信息 分解这个组合:“ ...