<!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. Bzoj1479: [Nerrc1997]Puncher打孔机

    1479: [Nerrc1997]Puncher打孔机 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 22  Solved: 14[Submit][Sta ...

  2. [git] 细说commit (git add/commit/diff/rm/reset 以及 index 的概念)

    http://kasicass.blog.163.com/blog/static/39561920133294219374/ 创建测试仓库 $ git init $ echo "line o ...

  3. Python装饰器学习（九步入门）

    这是在Python学习小组上介绍的内容,现学现卖.多练习是好的学习方式. 第一步:最简单的函数,准备附加额外功能 ? 1 2 3 4 5 6 7 8 # -*- coding:gbk -*- '''示 ...

  4. jquery中html()或text()方法获取或设置p标签的值

    html()方法可以用来读取或者设置某个元素中的HTML内容,text()方法可以用来读取或者没置某个元素中的文本内容 html()方法 此方法类似于JavaScript中的innerHTML属性,可 ...

  5. MyEclipse 修改项目字符集

    项目->右键+properties->Resource->Text file container->others->utf-8

  6. [c#]解决方案：需要“jquery”ScriptResourceMapping。请添加一个名为 jquery (区分大小写)的 ScriptResourceMapping。

    问题详情 如下图所示(部分): 出现该错误,是因为应用程序中需要使用到jquery(现在的web应用程序哪个能离开jquery呢),而目前程序目录中并没有jquery文件,或者有jquery文件但是程 ...

  7. 避免Node.js中回调地狱

    为了解决这个阻塞问题,JavaScript严重依赖于回调,这是在长时间运行的进程(IO,定时器等)完成后运行的函数,因此允许代码执行经过长时间运行的任务. downloadFile('example. ...

  8. input框的默认bug解决办法

    input框的默认bug是在没干掉边框的情况下是不能设置背景颜色的,否则边框会变成内边框(黑色)效果,很难看. 解决办法是: none掉input框的边框:border:none; 再设置其背景色为任 ...

  9. C-Sharp网络编程案例解析（Socket类的使用）

    Server端: using System; using System.Collections.Generic; using System.Text; using System.Net; using ...

  10. Failed to register Grid Infrastructure type ora.mdns.type

    安装11g的集群软件的时候,在最后运行root.sh脚本时候,没有执行成功,最后提示如下错误: [root@r2 ~]# /u01/app/11.2.0/grid_1/root.sh Performi ...