<!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. Oracle数据库常用技术

    一.视图(重点) 什么是视图? ·视图由一个或多个表(或视图)中提取数据而成 ·视图是一种虚拟表 ·视图一经创建,可以当作表来使用. 使用视图的好处? · 简化复杂数据查询 · 提高运行效率 · 屏蔽 ...

  2. Django 设置cookies与获取cookies.

    在Django里面,使用Cookie和Session看起来好像是一样的,使用的方式都是request.COOKIES[XXX]和request.session[XXX],其中XXX是您想要取得的东西的 ...

  3. 在ubtuntu中使用包管理器 linux-brew

    用惯了mac的程序员回到linux开发平台总觉得有点不适应,这是因为linux的界面没有mac那么精美,而且linux的包管理器没有mac上面的homebrew那么强大.mac程序员遇到库的依赖问题时 ...

  4. Mac 安装Rudy环境 pod安装前的准备工作

    之前已经说过怎么使用pod 今天说一下安装pod之前的准备工作 首先呢就是Rudy 环境(前提是你已经安装了Xcode) 在终端输入一下命令 期间可能也许会要你输入密码 curl -L https:/ ...

  5. Bootstrap入门（十八）组件12：徽章与巨幕

    Bootstrap入门(十八)组件12:徽章与巨幕 1.徽章 2.巨幕 1.徽章 给链接.导航等元素嵌套 <span class="badge"> 元素,可以很醒目的展 ...

  6. 【蒙地卡罗法求PI】

    /* 蒙地卡罗法求PI 说明 蒙地卡罗为摩洛哥王国之首都,该国位于法国与义大利国境,以赌博闻名.蒙地卡罗的基本原理为以乱数配合面积公式来进行解题,这种以机 率来解题的方式带有赌博的意味,虽然在精确度上 ...

  7. Linux 菜鸟学习笔记--系统分区

    硬盘分区 常识 主分区:最多只能有4个 扩展分区:用于突破主分区最多4个的限制 *最多只能有1个 *主分区+扩展分区最多有4个 *不能写入数据,只能包含逻辑分区 逻辑分区 格式化:实际是写入文件系统, ...

  8. css3 过渡和2d变换——回顾

    1.transition 语法:transition: property duration timing-function delay; transition-property 设置过渡效果的css ...

  9. wap网页、微信内嵌网页在手机端页面窗口尺寸如何不缩放

    如何让wap网页.微信内嵌网页内容(尺寸和文字)在手机端页面窗口尺寸不被强制缩放 在head中加入: <meta http-equiv="Content-Type" cont ...

  10. 调用win32 api 函数SendMessage() 实现消息直接调用

    简单的调用例子, 适合初学者学习,当然 我也是初学者. #include <windows.h> #include <stdio.h> #include <stdlib. ...