<html>代码

基本架构：一个大的div下面2个ul，ul下面各三个li

<div class="big">
<ul class="content">
<li class="one">水果</li>
<li>服装</li>
<li>电器</li>
</ul>
<ul class="content1">
<li class="one2">苹果、西瓜、黑提、葡萄、橘子、芒果</li>
<li>长袖、短袖、衬衫、阔腿裤、西裤</li>
<li>洗衣机、液晶电视、油烟机、空调</li>
</ul>
</div>

<css>中

* {
margin:0;
padding:0;
}
.big {
width: 300px;
margin: 50px auto;
font-size: 20px;
}
ul,li {
list-style: none;
}
.content li {
width: 80px;
background: #F9D6D6;
border: 1px solid #666;
border-bottom: 0; /* 下边框为0 */
float: left;
padding:5px;
margin-right: 2px;
text-align: center;
cursor: pointer; /*鼠标小手*/
}
.content .one {
font-weight: bold;
z-index: 100;
position: relative;
}
.content1 {
width: 255px;
height: 120px;
padding: 10px;
background-color: #F9D6D6;
clear: left;
border: 1px solid #666;
position:relative;
top: -1px;
}
.content1 li{
line-height: 40px;
text-align: center;
display: none;
}
.content1 .one2{
display: block;
}

<js>

$(function () {
//找到content下面所有的li each() 方法规定为每个匹配元素规定运行的函数（遍历循环）
$(".content li").each(function(index) {

$(this).click(function() {

//增加一个content one样式 并移除第一个ul里面名为'one'的所有同胞元素
$(this).addClass("content one").siblings().removeClass("one");

$(".content1 li:eq("+index+")").show().siblings().hide();
})
})
})

Tab选框的更多相关文章

  1. 【三石jQuery视频教程】02.创建 FontAwesome 复选框和单选框

    视频地址:http://v.qq.com/page/m/8/c/m0150izlt8c.html 大家好,欢迎来到[三石jQuery视频教程],我是您的老朋友 - 三生石上. 今天,我们要通过基本的H ...

  2. 关于textjs的tree带复选框的树

    通过查阅一些资料和自己之前了解到的一些相关知识,有时项目中需要用到.话不多说,先看一下效果图: 我写的这人员选择的树,主要是改写了TreePanel,如下代码: ExtendTreePanel.js ...

  3. easyUI 创建有复选框的table.datagrid

    table : function(data){ pt.v.table.datagrid({ // singleSelect:true, height:295, columns:[[ {field:'x ...

  4. MFC控件编程之复选框单选框分组框

    MFC控件编程之复选框单选框分组框 一丶分组框 分组框 英文叫做 GroubBox 添加了分组框主要就是分组.好看.不重点介绍 二丶单选框 英文: Raido Button 单选框需要注意的事项 1. ...

  5. seleniumu 3.0复选框操作(定位一组元素）

    一般验证复选框是否可以选择点击常用到定位一组元素去循环遍历执行点击事件.但是有时候在不同的浏览器下可能会存在差异化的最终结果. 目前谷歌浏览器常常存在多次点击同一复选框,导致最终最后两项复选框均未被勾 ...

  6. elementui禁用树形结构全部复选框

    需求:编辑回显数据后,禁用树形结构复选框,不可选中,无复选框也不可选中 <el-tabs v-model="activeName" @tab-click="hand ...

  7. （七）对话框，单选框(radiobox)，复选框(checkbox)，列表框(ListBox)，组合框(CComboBox)，水平滚动条(Horizontal scroll bar)，微调(旋转)spincontrol，列表视图控件CListCtrl，静态控件static

    1,模态对话框和非模态对话框 // 模态对话框 void CMainFrame::OnDialogExec() { // TODO: 在此添加命令处理程序代码 // 创建对话框对象 CDialog d ...

  8. 006.MFC_对话框_复选框_单选钮

    对话框和控件复选框单选框分组框示例:三原色画图 一.建立名为Demo2的MFC工程,按照下图添加控件 并修改2个Group Box Caption属性分别为颜色.外观 修改3个Check Box Ca ...

  9. 对jquery操作复选框

    摘要:jquery操作复选框.使用更简洁易懂,思路清晰,逻辑更明了,很实用 <!DOCTYPE html> <html> <head> <meta chars ...

随机推荐

  1. spring基础系列--JavaConfig配置

    原创作品,可以转载,但是请标注出处地址:http://www.cnblogs.com/V1haoge/p/7171011.html 早以前,Spring推荐使用XML的方式来定义Bean及Bean之间 ...

  2. JavaSE中线程与并行API框架学习笔记1——线程是什么？

    前言:虽然工作了三年,但是几乎没有使用到多线程之类的内容.这其实是工作与学习的矛盾.我们在公司上班,很多时候都只是在处理业务代码,很少接触底层技术. 可是你不可能一辈子都写业务代码,而且跳槽之后新单位 ...

  3. git - 远程分支

    对于用户来说,git给人提交到本地的机会.我们可以在自己的机器上创建不同的branch,来测试和存放不同的代码. 对于代码管理员而言,git有许多优良的特性.管理着不同的分支,同一套源代码可以出不一样 ...

  4. nyoj_120: 校园网络

    题目链接 要加边使一个图成为一个强连通分量,只需加max(出度为0的点数,入度为0的点数)条边(可以不使用tarjan算法).题目数据有点弱,网上一些人所谓 结果 = 出度为0的点的数量+入度为0的点 ...

  5. Mybatis jpa mini 代码解析

    源码地址(git):https://github.com/LittleNewbie/mybatis-jpa 一.Mybatis简介 mybatis中文官方文档:http://www.mybatis.o ...

  6. 最短路径之Dijkstra算法和Floyd-Warshall算法

    最短路径算法 最短路径算法通常用在寻找图中任意两个结点之间的最短路径或者是求全局最短路径,像是包括Dijkstra.A*.Bellman-Ford.SPFA(Bellman-Ford的改进版本).Fl ...

  7. 【JS】cookies 的使用

    摘要 cookies 的限制 IE6~IE6以下,每个域名最多20个cookie IE7及以上,每个域名最多50个cookie Firefox,每个域名最多50个cookie Opera,每个域名最多 ...

  8. 6.RDD持久性

    RDD持久性 1 Why Apache Spark 2 关于Apache Spark 3 如何安装Apache Spark 4 Apache Spark的工作原理 5 spark弹性分布式数据集 6 ...

  9. Redux源码分析之bindActionCreators

    Redux源码分析之基本概念 Redux源码分析之createStore Redux源码分析之bindActionCreators Redux源码分析之combineReducers Redux源码分 ...

  10. ASP.NET Core 源码学习之 Logging[2]:Configure

    在上一章中,我们对 ASP.NET Logging 系统做了一个整体的介绍,而在本章中则开始从最基本的配置开始,逐步深入到源码当中去. 默认配置 在 ASP.NET Core 2.0 中,对默认配置做 ...