<!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. TSP问题[动态规划]

    分析: 有用的量:城市集合V={a,b,c,d,--} 所以我们用 T(i,V) 表示从 城市 i 出发遍历集合 V 中的城市一遍且仅一遍后回到 i 所用的最少费用(这里可能表达不好,底下会看到,但是 ...

  2. r.js build.js配置

    /* * This is an example build file that demonstrates how to use the build system for * require.js. * ...

  3. dev repositoryItem 手工定义

    一.打开设计界面 二.定义Repository 事件定义 三.把repositoryItemTextEdit1邦定存在的列

  4. iOS 程序调试、测试方案

    1. iOS 之 界面调试 2. iOS 之 调试.解决BUG 3. iOS 程序测试.程序优化.提交前检测

  5. 遗传算法GA

    遗传算法(Genetic Algorithms,GA)是一种全局优化方法,它借用了生物遗传学的观点,通过自然选择.遗传.变异等作用机制,实现种群中个体适应性的提高,体现了自然界中“物竞天择.适者生存” ...

  6. Struts2的一个入门实例----登录功能

    一.搭建环境与测试 1.web.xml文件,配置核心Filter 1: <?xml version="1.0" encoding="UTF-8"?> ...

  7. VMware虚拟机与宿主无法复制的解决办法

    由于工作需要,上网机器使用虚拟机,因此需要经常来回的拷贝文件,而vmware从6.5一直走来到10.0.1,总是有一个问题很让人苦恼---共享粘贴板总是会无故失效.经常实验,发现可以经过以下方法临时解 ...

  8. HDU-1020-Encoding（水题，但题目意思容易搞错，英语的问题）

    题目链接 http://acm.hdu.edu.cn/webcontest/contest_showproblem.php?pid=1000&ojid=0&cid=7996&h ...

  9. SVG的Transform使用

    SVG的Transform使用: <%@ page language="java" contentType="text/html; charset=UTF-8&qu ...

  10. loadrunner controller：设置多个load generator

      下面讲一下如何使用多台电脑进行负载测试. 1)         打开load generator,如图所示默认已添加了我们本地的Generator: 2)         点击"Add. ...