通过jq封装的方法,可以更简单的制作一个选项卡

 <!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<style>
* {
margin: 0;
padding: 0;
} #btn ul {
width: 300px;
height: 50px;
margin: 50px;
} .on {
color: red;
} #btn ul li {
list-style-type: none;
width: 50px;
height: 50px;
margin-left: 10px;
background: gray;
float: left;
line-height: 50px;
text-align: center;
cursor: pointer;
}
</style>
</head> <body>
<div id="btn">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div> <div>
<div id="jq1"></div>
<div class="jq2"></div>
<div id="jq3"></div>
</div> <script> //通过jq来设置三个要div
$(".jq2")[0].style.width = "100px";
$(".jq2")[0].style.height = "100px";
$(".jq2")[0].style.background = "blue"; $("#jq1")[0].style.width = "100px";
$("#jq1")[0].style.height = "100px";
$("#jq1")[0].style.background = "red"; $("#jq3")[0].style.width = "100px";
$("#jq3")[0].style.height = "100px";
$("#jq3")[0].style.background = "green"; //定义一个变量aLi用于存放btn下面的li,方便使用
var aLi = $("#btn ul li");
//通过hide()方法来设置三个div隐藏
$("div div").hide();
//点击每一个li触发事件clik()方法,方法自带for循环
aLi.click(function() {
//把每个li通过index()方法所带序号存进一个变量中
var iNum = $(this).index();
//addClass()方法是增加类名,removeClass()方法是移出类名
$(this).addClass("on").siblings().removeClass("on");
//隐藏三个框,通过eq()方法选择显示当前li对应序号的框
$("div div").hide().eq(iNum).show();
})
</script>
</body> </html>

载入外链jq,就可以开始写代码了

JQuery笔记(三)选项卡的更多相关文章

  1. jQuery笔记三——text/html/val/attr/prop

    1.获得内容 三个简单实用的用于 DOM 操作的 jQuery 方法: text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容(包括 HTML 标记) val() ...

  2. Python全栈之jQuery笔记

    jQuery runnoob网址: http://www.runoob.com/jquery/jquery-tutorial.html jQuery API手册: http://www.runoob. ...

  3. JQuery笔记汇总

    jQuery相关资料 官网: jQuery官网 在线API: jQuery在线API W3School:W3School-jQuery教程(中文版哦) 下载jQuery:jQuery各版本下载 jQu ...

  4. jquery封装的选项卡

    ul,li,div{ margin:; padding:;} ul,li{ list-style:none;} .tab_wrap{ width:450px; margin: auto 50px; o ...

  5. jquery插件之选项卡

    jQuery插件编写 首先来一个简拓展jQuery对象的方法 <body > <p>23</p> <script src="js/jquery-1. ...

  6. amazeui学习笔记三(你来我往1)--常见问题FAQs

    amazeui学习笔记三(你来我往1)--常见问题FAQs 一.总结 1.DOM事件失败:记得加上初始化代码,例如 图片轮播 $('#my-slider').flexslider(); 2.jquer ...

  7. js进阶 11-24 jquery如何实现选项卡的制作

    js进阶 11-24 jquery如何实现选项卡的制作 一.总结 一句话总结:ul>li做选项卡的选项卡头,多个div做选项卡的内容,点到对应的li,就切换到对应的div,用index()获取l ...

  8. 使用jQuery开发tab选项卡插件(可以右键关闭多个标签)

    在前一篇“使用jQuery开发tab选项卡插件”的基础上添加了tab标签右键关闭菜单功能,菜单主要包括:关闭当前标签.关闭左侧标签.关闭右侧标签.关闭其他.关闭全部. 一.插件效果 二.实现思路 为w ...

  9. 使用jQuery开发tab选项卡插件

    为了复习巩固jQuery的插件开发.HTML和CSS方面的知识,做了一个简单的tab选项卡插件,简单记录一下开发.使用的过程,以备日后使用. 一.插件效果 tab选项卡插件常用的功能均已实现,包括:动 ...

随机推荐

  1. Git命令行连Github与TortoiseGit 连Github区别

    如果是用git 通过命令行的方式连接github,那么只需要通过命令 $ ssh-keygen -t rsa -C "your_email@youremail.com" 生成rsa ...

  2. hdu4277 USACO ORZ

    USACO ORZ Time Limit: 5000/1500 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Sub ...

  3. uploadify的使用

    uploadify的使用 课程设计需要实现上传文件模块,本来ASP.NET是有内置的控件,但是ASP.NET MVC没有,所以就有两种方法:自定义和采用第三方插件.由于时间的关系,故采用第三方插件:u ...

  4. HDFS中文件的压缩与解压

    HDFS中文件的压缩与解压 文件的压缩有两大好处:1.可以减少存储文件所需要的磁盘空间:2.可以加速数据在网络和磁盘上的传输.尤其是在处理大数据时,这两大好处是相当重要的. 下面是一个使用gzip工具 ...

  5. 用Linux命令行实现删除和复制指定类型的文件

    (一)Linux 删除当前目录及子目录中所有某种类型的文件 方法1 : 此方法不能处理目录中带空格的那些. rm -rf `find . -name "*.example"` Li ...

  6. hdu-4471-Homework-矩阵快速幂+优化加速

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=4471 题目意思: 求f(n). 当n为特殊点nk时 解题思路: 当x不为特殊点时,直接用基本的矩阵快 ...

  7. UVA 216 - Getting in Line

    216 - Getting in Line Computer networking requires that the computers in the network be linked. This ...

  8. javascript深入之location对象和history对象

    浏览器的location 和history对象: 一.location对象: 1>location.reload() 相当于按浏览器上的“刷新”(IE)或“Reload”(Netscape)键. ...

  9. C++中的结构体vector排序

    在包含了头文件#include <algorithm>之后,就可以直接利用sort函数对一个vector进行排序了: // sort algorithm example #include ...

  10. sublime text3 3103 激活码

    —– BEGIN LICENSE —–Michael BarnesSingle User LicenseEA7E-8213858A353C41 872A0D5C DF9B2950 AFF6F667C4 ...