<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. java 文件的编码 问题

    package com.io; public class Encodedemo { public static void main(String[] args)throws Exception{ // ...

  2. Jenkins+Git配置

    Jenkins+Git配置 一.GitHub上配置 前提:Jenkins能正常打开 将本地文件上传到GitHub上:进入终端 cd Documents cd project git clone htt ...

  3. Microsoft office2010页码设置----论文、课程设计报告格式

    思想:将目录页(含目录页)与目录页以下的页面用分隔符分隔开,单独设置目录页以下的页面页码,删除目录页(含目录)以前的页码. 1.在目录页页面内容最下面一行插入分隔符,实现与下面页面分隔开的目的. 页面 ...

  4. Merge使用

    Role r = new Role(); r.setName("TEST"); r.setDescription("123"); r.setLevel(2); ...

  5. 常见MD5加密解密值及免费解密网站

    常用的MD5解密 MD5(admin,16)    = 7a57a5a743  MD5(admin,16)    = 7a57a5a743894a0e  MD5(admin888,16) = 469e ...

  6. Python collections模块总结

    Python collections模块总结 除了我们使用的那些基础的数据结构,还有包括其它的一些模块提供的数据结构,有时甚至比基础的数据结构还要好用. collections ChainMap 这是 ...

  7. java第一课，java基础

    Java:                是1991年SUN公司的James Gosling等人开发名称为Oak的语言,希望用于控制嵌入在有线电视交换盒,PDA等的微处理器.java.是面向互联网的语 ...

  8. React Native App设置&Android版发布

    React Native系列 <逻辑性最强的React Native环境搭建与调试> <ReactNative开发工具有这一篇足矣> <解决React Native un ...

  9. html5 01 随记

    一  HTML 是一种制作网站的标记语言 二.HTML基本语法 HTML 标签 html标签是html中的最基本单位 也是最重要的部分 通常使用尖角号 开始"<"和结束&qu ...

  10. c++ vector(向量)使用方法详解(顺序访问vector的多种方式）

    来源:http://www.jb51.net/article/44231.htm 作者: 字体:[增加 减小] 类型:转载 时间:2013-12-08我要评论 vector是向量类型,它可以容纳许多类 ...