jQuery写选项卡
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8"><title>choseCart</title>
<script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.js"></script>
<styletype="text/css">
*{margin: 0;padding: 0;}
li{list-style: none;}
#menu {height: 30px;}
#menu li{float: left;background: #999;color: #fff;cursor: pointer;border:2px solid #666;}
#menu .active{border-right-color: #666;border-left-color: #666;border-top-color: blue;border-bottom-color: #fff}
#pannel div:nth-of-type(1){background: green;width: 335px;height: 200px;}
#pannel div:nth-of-type(2){background: blue;width: 335px;height: 200px;}
#pannel div:nth-of-type(3){background: black;width: 335px;height: 200px;}
#pannel div:nth-of-type(4){background: red;width: 335px;height: 200px;}
#pannel div{display: none;}
#pannel .active{display: block;}
</style><scripttype="text/javascript">
$(function(){
let oLi=$('#menu li');
/*oLi.bind('click',function() {
let iIndex=$(this).index();oLi.removeClass('active').eq(iIndex).addClass('active');
$('#pannel div').removeClass('active').eq(iIndex).addClass('active');
});*/
oLi.hover(function(){
let iIndex=$(this).index();
oLi.removeClass('active').eq(iIndex).addClass('active');
$('#pannel div').removeClass('active').eq(iIndex).addClass('active');
})
})
</script>
</head>
<body>
<div id="box">
<ul id="menu">
<li class="active">第一个按钮</li>
<li>第二个按钮</li>
<li>第三个按钮</li>
<li>第四个按钮</li>
</ul>
<div id="pannel">
<div class="active"></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</body>
</html>
回来再总结下思路吧：
1：CSS布局要点：默认按钮和内容区域第一个为active状态，
2：写jQuery时通过addClass()/removeClass()来改变卡片的状态；
jQuery写选项卡的更多相关文章
- jQuery实例—选项卡（js源码和jQuery）【一些常见方法（1）-练习】
分别利用javascript的源码和jQuery来实现一个简单的选项卡,对比各自的步骤. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tr ...
- jq方法写选项卡的基本原理以及三种方法
使用jq写选项卡,告别了繁琐的循环以及命名规范 基本原理: 1.当某一个btn被选中时,将这个btn的背景颜色设为橘色,其余兄弟btn背景颜色设为空(none) 2.如果子div与btn的索引相同,就 ...
- 为jQuery写插件
很多场合,我们都会调用jQuery的插件去完成某个功能,比如slider. 如下图,做一个div,通过“$( "#slider" ).slider();”的方式直接将div变成sl ...
- 用jquery写循环播放div的相关笔记 珍贵的总结 -1
用jquery写循环播放div line-height应用的元素的 层次? line-heig字ht, 叫行高, 仅仅是指 文/文本, 而不管图片. line-height是容器中 文本行 与 文本行 ...
- jquery Tabs选项卡切换
效果: HTML部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- 基于JQUERY写的 LISTBOX 选择器
本文来之于:http://blog.csdn.net/jetsteven/article/details/5104380# 1.经常用到如下图的选择器,而且要支持排序的,所以萌生用JQUERY写一个. ...
- 用jQuery写了一个模态框插件
用jQuery写了一个模态框插件 大家觉得下面的框框好看么, 水印可以去掉(这个任务交给你们了(- o -)~zZ); "info"框 $("div").con ...
- 用jQuery写的最简单的表单验证
近几天完成了关于我们项目的最简单的表单验证,是用jQuery写的,由于之前也一直没学过jQuery,所以自己也是一直处于边摸索边学习的阶段,经过这一段时间的学习,通过查资料啥的,也发现了学习jQuer ...
- 运用jQuery写的验证表单
//运用jQuery写的验证表单 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...
随机推荐
- MySQL5.6-Tomcat7环境变量的配置
一.MySQL环境变量配置(zip安装):系统-高级系统设置--环境变量--path添加D:\Mysql\bin 找到mysql解压目录下的my-default.ini文件修改 basedir = D ...
- iOS 之 文件缓存
对于信息量不是太大的数据,可以使用文件缓存来处理.文件缓存可以缓存字典和数组. 步骤一:创建路径 路径要一级一级往下创建,基本不用考虑创建失败的情况.但是如果创建失败了要怎么做呢?按道理应该提示出来. ...
- 读书笔记--用Python写网络爬虫02--数据抓取
抓取(scraping)---爬虫从网页中抽取一些数据用以实现某些用途. 三种抽取网页数据的方法:正则表达式.Beautiful Soup和lxml. 2.1 分析网页 通过浏览器自带选项,查看网页源 ...
- --@angularJS--浅谈class与Ng-Class的应用
1.angularjs的表达式是可以写在class里面动态改变其值的,写法如下: □.CSS1.html: <!doctype html><html ng-app="MyC ...
- Servlet进阶API
对于每个Servlet的设置信息,web容器会为其生成一个ServletConfig作为代表对象,可以从该对象取得Servlet初始参数,以及代表整个web应用程序的ServletContext对象. ...
- No curses/termcap library found
CentOS6.5中编译Mysql时遇见如下错误 error: No curses/termcap library found checking for tgetent in -lncurses... ...
- Java线程：线程状态
线程可以创建6状态: New()新创建.Runnable(可运行).Blocked(被阻塞). Waiting(等待).Timed waiting(计时等待).Terminated(被终止)1 新建线 ...
- js运算符单竖杠“|”的作用
在js整数操作的时候,相当于去除小数点,parseInt.在正数的时候相当于Math.floor(),负数的时候相当于Math.ceil() 注: 1. Math.ceil()用作向上取整. 2. M ...
- JUC学习笔记--JUC中并发工具类
JUC中并发工具类 CountDownLatch CountDownLatch是我目前使用比较多的类,CountDownLatch初始化时会给定一个计数,然后每次调用countDown() 计数减1, ...
- 关于flash擦除的方法
一般的Flash,只允许写时将1变成0,而不允许0变成1:仅当擦除时将0变成1.所以写全0xff是没什么意义的 以前对flash只能进行一次写很困惑,这句话解释了原因. norflash就是 对bit ...