<!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写选项卡的更多相关文章

  1. jQuery实例—选项卡（js源码和jQuery）【一些常见方法（1）-练习】

    分别利用javascript的源码和jQuery来实现一个简单的选项卡,对比各自的步骤. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tr ...

  2. jq方法写选项卡的基本原理以及三种方法

    使用jq写选项卡,告别了繁琐的循环以及命名规范 基本原理: 1.当某一个btn被选中时,将这个btn的背景颜色设为橘色,其余兄弟btn背景颜色设为空(none) 2.如果子div与btn的索引相同,就 ...

  3. 为jQuery写插件

    很多场合,我们都会调用jQuery的插件去完成某个功能,比如slider. 如下图,做一个div,通过“$( "#slider" ).slider();”的方式直接将div变成sl ...

  4. 用jquery写循环播放div的相关笔记 珍贵的总结 -1

    用jquery写循环播放div line-height应用的元素的 层次? line-heig字ht, 叫行高, 仅仅是指 文/文本, 而不管图片. line-height是容器中 文本行 与 文本行 ...

  5. jquery Tabs选项卡切换

    效果: HTML部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  6. 基于JQUERY写的 LISTBOX 选择器

    本文来之于:http://blog.csdn.net/jetsteven/article/details/5104380# 1.经常用到如下图的选择器,而且要支持排序的,所以萌生用JQUERY写一个. ...

  7. 用jQuery写了一个模态框插件

    用jQuery写了一个模态框插件 大家觉得下面的框框好看么, 水印可以去掉(这个任务交给你们了(- o -)~zZ); "info"框 $("div").con ...

  8. 用jQuery写的最简单的表单验证

    近几天完成了关于我们项目的最简单的表单验证,是用jQuery写的,由于之前也一直没学过jQuery,所以自己也是一直处于边摸索边学习的阶段,经过这一段时间的学习,通过查资料啥的,也发现了学习jQuer ...

  9. 运用jQuery写的验证表单

    //运用jQuery写的验证表单 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

随机推荐

  1. windows系统下安装Scala

    一.下载.msi文件 直接下一步安装 二.配置环境变量 1.环境变量 -->> 用户变量 -->> 新建 SCALA_HOME: D:\Program Files\scala ...

  2. Java中两个List对比的算法

    Java中两个List对比的算法:   // 测试数据 // tdcsDdt.add("Z"); // tdcsDdt.add("B"); // tdcsDdt ...

  3. C实现类、继承、多态

    首先考虑用C实现类 肯定是要使用struct的,类的数据成员放在struct里面: 而类有构造函数.析构函数,这两个函数必须在struct外面,构造函数要分配struct空间并初始化struct成员, ...

  4. Round-Robin负载均衡算法及其实现原理

    毫无疑问,随着互联网.移动网络接入成本的降低,互联网正在日益深入地走入我们的生活,越来越成为人们获取信息的高效平台,ICP行业也顺势呈现出强劲的成长趋势,成为互联网迅猛发展形势下最大的受益者,也直接促 ...

  5. Word常用实用知识1

    Word常用实用知识1 纯手打,可能有错别字,使用的版本是office Word 2013 转载请注明出处,谢谢. 快速输入日期(含格式) [插入]--[日期]   快速输入日期和时间(快捷键) 快速 ...

  6. Google中Gson的使用解析json数据-------学习篇

    之前写过一篇Gson解析json数据的基本应用,这里不多说,直接上例子. 有兴趣的可以先阅读下之前那篇,这里附上链接: http://www.cnblogs.com/Ant-soldier/p/632 ...

  7. 模仿qq界面实现（WTL）

    前面对于界面用哪一种我试过用duilib,但是老感觉和MFC差距有点多,终于发现WTL的库能够实现我的所有界面功能,几天的努力终于搞定界面的重写.还是见我的成果吧: 1登录界面: 2主界面: 3.主界 ...

  8. KB奇遇记(2)：缘起

    最早听到这家公司的名字,大概还是在好几年前. 正是2012年,之前的在一起灿坤待过的同事LY在这家公司当高层,正好公司规模大了,要上ERP项目.苦于公司没有这方面的人才,而内部IT又太差劲支撑不起来. ...

  9. android： activity之间切换的抽屉效果

    之前一直用的是向左平移和向右平移的切换动画,看到别的APP那个抽屉效果,自己也弄了一个!感谢给我提供帮助的大神们! 将退出动画的参数设置为0时,进入动画则设置为向左平移,就实现了抽屉效果! 进入的动画 ...

  10. Backdoor CTF 2013: 电子取证 250

    0x00 题目 h4x0r厌烦了你对他的城堡的所有攻击,所以他决定报复攻击你,他给你发来一封带有图片的邮件作为警告,希望你能找出他的警告消息:-) 消息的MD5值就是flag. 0x01 解题法1 给 ...