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. C#使用xpath查找xml节点信息

    Xpath是功能很强大的,但是也是相对比较复杂的一门技术,最好还是到博客园上面去专门找一些专业的帖子来看一看,下面是一些简单的Xpath语法和一个实例,提供给你参考一下. xml示例: <?xm ...

  2. JavaScript--Array; Array.prototype

    Array: Javascritp中Array的方法: findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引.否则返回-1. find() 方法返回数组中满足提供的测试函数的第一个 ...

  3. UVA-12304 Race(递推)

    题目大意:求n个人比赛的所有可能的名次种数.比如:n=2时,有A第一B第二.B第一A第二.AB并列第一三种名次. 题目解析:既然是比赛,总有第一名.第一名的人数可能是i (1≤i≤n),则剩下待定的人 ...

  4. ps -ef |grep xxx 输出的具体含义

    ps:将某个进程显示出来 -A 显示所有程序. -e 此参数的效果和指定"A"参数相同. -f 显示UID,PPIP,C与STIME栏位. grep命令是查找 中间的|是管道命令 ...

  5. eclipse properties 文件查看和编辑插件 Properties Editor

    Properties Edito官网地址:http://propedit.sourceforge.jp/index_en.html Properties Edito安装地址:http://proped ...

  6. Oracle12c新特性之基本操作

    1.  服务器端连接并启动数据库: sqlplus / as sysdba startup; 2.  服务器端连接并关闭数据库: sqlplus / as sysdba shutdown immedi ...

  7. PHP:第二章——PHP中的foreach语句

    foreach语句提供了遍历数组的 <?php header("Content-Type:text/html;charset=utf-8"); $arr=array(&quo ...

  8. SGU 124. Broken line 射线法 eps的精准运用,计算几何 难度:3

    124. Broken line time limit per test: 0.25 sec. memory limit per test: 4096 KB There is a closed bro ...

  9. FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory

    vue项目 npm run dev 报错 WAIT Compiling...16:36:21 95% emittingFATAL ERROR: CALL_AND_RETRY_LAST Allocati ...

  10. 入门级:理解FAT32文件系统(转载翻译)

    FAT(File Allocation Table ) 这个网页的目的是帮助你理解怎么样在微软FAT32文件系统下取得数据,处理的硬盘的大小通常在500M到几百G之间.FAT是一个相对简单和纯净的文件 ...