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. jsp post/get中接处理

    jsp post/get中接处理 以参数:username为便 post接收中文比get接收中文要方便多了. <%@ page contentType="text/html;chars ...

  2. 介绍 Jersey 依赖

    Jersey 使用 Apache Maven 进行构造和安装.非快照(Non-snapshot)Jersey 发行版本是不会部署到 中心 Maven 仓库(Central Maven Reposito ...

  3. Confluence 6 自动添加用户到用户组

    默认组成员(Default Group Memberships) 选项在 Confluence 3.5 及后续版本和 JIRA 4.3.3 及后续版本中可用.这字段将会在你选择 'Read Only, ...

  4. Lunar New Year and Red Envelopes CodeForces - 1106E (dp)

    大意: 总共$n$的时间, $k$个红包, 红包$i$只能在时间$[s_i,t_i]$范围内拿, 并且拿完后时间跳到$d_i+1$,Bob采用贪心策略,每个时间点若有红包能取则取钱数$w_i$最大的, ...

  5. Shell脚本中点号+文件名的作用

    熟悉linux是程序员必须具备的技能,水滴石穿,一点点学习吧. linux中一个文件是根据其是否具有执行属性来判断他是否可以直接运行的.就像windows下的exe一样. 如果我们要执行某一个文件,可 ...

  6. 『PyTorch』第五弹_深入理解autograd_中：Variable梯度探究

    查看非叶节点梯度的两种方法 在反向传播过程中非叶子节点的导数计算完之后即被清空.若想查看这些变量的梯度,有两种方法: 使用autograd.grad函数 使用hook autograd.grad和ho ...

  7. 『Scrapy』爬取斗鱼主播头像

    分析目标 爬取的是斗鱼主播头像,示范使用的URL似乎是个移动接口(下文有提到),理由是网页主页属于动态页面,爬取难度陡升,当然爬取斗鱼主播头像这么恶趣味的事也不是我的兴趣...... 目标URL如下, ...

  8. Centos7上部署openstack ocata配置详解

    之前写过一篇<openstack mitaka 配置详解>然而最近使用发现阿里不再提供m版本的源,所以最近又开始学习ocata版本,并进行总结,写下如下文档 OpenStack ocata ...

  9. 循环大法——一次性理清forEach/for-in/for/$each

    国寿的这个项目写得我基础都忘完了 近期会把vue和基础都并行复习.学习 forEach 适用于调用数组的每个元素,并将元素传递给回调函数,但是空数组是不会执行回调函数的.forEach适用于集合中的对 ...

  10. kernel jenkins build script

    #!/bin/bash #gcc: site="https://releases.linaro.org" #https://releases.linaro.org/componen ...