<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. WriteTeacherObj

    package JBJADV003;import java.io.*;public class WriteTeacherObj { /** * @param args */ public static ...

  2. PHP实现跨域解决方法

    如果要实现跨域通过设置Access-Control-Allow-Origin来实现跨域. 例如:客户端的域名是client.runoob.com,而请求的域名是server.runoob.com. 如 ...

  3. Android性能优化：ViewStub

    在开发应用程序的时候,经常会遇到这样的情况,会在运行时动态根据条件来决定显示哪个View或某个布局.那么最通常的想法就是把可能用到的View都写在上面,先把它们的可见性都设为View.GONE,然后在 ...

  4. 20170713_filter/sort

    js:filter过滤数组元素 //1.数组取奇数 var arr = [1,2,3,4,5]; var r = arr.filter(function(x){ return x % 2 !== 0; ...

  5. ARM开发（2）基于STM32的蜂鸣器

    基于STM32的蜂鸣器 一 蜂鸣器原理:  1.1 本实验实现1个蜂鸣器间隔1S鸣叫.  1.2 实验思路:根据电路图原理,给蜂鸣器相关引脚赋予高低电平,实现电路的导通,使蜂鸣器实现鸣叫或不鸣.  1 ...

  6. Spring Ioc-依赖注入的几种方式

    一 setter方法注入 配置文件如下: <bean id="helloAction" class="org.yoo.action.SpringSetterHell ...

  7. LFCP

    场景:总结LFCP项目开发中遇到的问题! 1 运营支撑 项目结构: 1.1 hessian配置 服务端实现: 客户端调用: 1.2 问题排查 之前一段时间,运营支撑项目能够正常运行,中间有其它事情要做 ...

  8. MyBatis 详解（一对一，一对多，多对多）

    1.什么是MyBatis? MyBatis 本是apache的一个开源项目iBatis, 2010年这个项目由apache software foundation 迁移到了google code,并且 ...

  9. bootstrap-table 怎么自定义搜索按钮实现点击按钮进行查询

    bootstrap-table自带搜索框感觉有点丑,我们可以把搜索功能单独拉出来放到页面的某一个位置. 首先我们看一下官方演示: 如果你感觉集成的检索框不太好看,而且我们也不想让搜索框和列表放到一块去 ...

  10. 如何使用lxml的XPath功能

    用python写爬虫呢,最常见的过滤方式有BeautifulSoup, css selector, XPath, 如果使用前两个,BeautifulSoup包就能解决,然而使用XPath,就要引入lx ...