<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. 自定义事件解决重复请求BUG

    现在,组件化开发还是比较流行的,毕竟其优点相当突出.最近在开发一个组件的时候,遇到了一个很有意思的BUG... BUG的背景 最近在开发一个组件,好不容易开发好了转测试.然后,测试给我提了一个这样的b ...

  2. 谷歌是如何做代码审查的 | 外刊IT评论 - Google Chrome

    谷歌是如何做代码审查的           本文的作者 Mark CC 在上一篇文章中提到过,我已经不在Google工作了.我还没有想清楚应该去哪里-有两三个非常好的工作机会摆在我面前.因为在这段做决 ...

  3. JS事件响应的学习总结

    点击事件:ocnlick 鼠标经过事件:onmouseover 鼠标移开事件:onmouseout 获得焦点事件:onfocus 失去焦点事件:onblur 内容选中事件:onselect 文本框内容 ...

  4. [AOP系列]Autofac+Castle实现AOP事务

    一.前言 最近公司新项目,需要搭架构进行开发,其中需要保证事务的一致性,经过一番查找,发现很多博文都是通过Spring.Net.Unity.PostSharp.Castle Windsor这些方式实现 ...

  5. 取一个整数a从右端开始的4～7位

    题目:取一个整数a从右端开始的4-7位. 程序分析:可以这样考虑: (1)先使a右移4位. (2)设置一个低4位全为1,其余全为0的数.可用~(~0 < <4) (3)将上面二者进行&am ...

  6. tag上、push上和pull 取Docker 映像

    在此之前需要拥有一个docker Hub账户,注册地址:https://hub.docker.com/. Tag.Push Docker映像 使用docker images 获取当前拥有的映像列表,其 ...

  7. Longest Palindromic Substring - 字符串中最长的回文字段

    需求:Given a string S, find the longest palindromic substring in S. You may assume that the maximum le ...

  8. 【Java IO流】RandomAccessFile类的使用

    RandomAccessFile类的使用 RandomAccessFile类是java提供的对文件内容的访问,既可以读文件,也可以写文件. 支持随机访问文件,可以访问文件的任意位置. RandomAc ...

  9. 现在,以编程方式在 Electron 中上传文件,是非常简单的!

    必要的上下文 想尽快熟悉上下文语境的,可以点这里: https://github.com/electron/electron/issues/749 这段讨论,其实本来是讨论如何自动设置 input 标 ...

  10. BestCoder Round #92 (hdu_6015 6016)

    比赛链接 A题主要是map的使用,比赛的时候问了下队友,下次要记住了 #include<bits/stdc++.h> using namespace std; typedef long l ...