制作一个简单的选项卡，以供初学者参考；关于css书写的比较粗糙。请见谅

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选项卡</title>
<style>
*{margin:0;padding:0;}
a{text-decoration:none;}
li{list-style: none;}
#box{
width:510px;
height:400px;
border:2px solid yellow;
}
.content{
width:510px;
height:300px;
overflow:hidden;
}
.a1{
width:510px;
height:300px;
background:#ccc;
display: none;
}
.a2{
width:510px;
height:300px;
background:red;
display:none;
}
.a3{
width:510px;
height:300px;
background:black;
display:none;
}
.a4{
width:510px;
height:300px;
background:blue;
display:none;
}
.a5{
width:510px;
height:300px;
background:#565656;
display:none;
}
.content .active{
display:block;

}
#box-title li{
width:100px;
height:100px;
float:left;
text-align:center;
border:1px solid yellow;

}
</style>
<script src="http://cdn.bootcss.com/jquery/1.8.3/jquery.js"></script>
<script >

　　

(function($){
$(function(){
var Li=$('#box-title li');
Li.click(function(){

var iIndex=$(this).index();
Li.removeClass('active').eq(iIndex).addClass('active');
$('.content div').removeClass('active').eq(iIndex).addClass('active');
console.log(1);
});
});
})(jQuery);

</script>
</head>
<body>
<div id="box">
<ul id="box-title">
<li class="active">第一部分</li>
<li>第二部分</li>
<li>第三部分</li>
<li>第四部分</li>
<li>第五部分</li>
</ul>
<div class="content">
<div class="a1 active">1</div>
<div class="a2">2</div>
<div class="a3">3</div>
<div class="a4">4</div>
<div class="a5">5</div>
</div>

</div>

</body>
</html>

css中选项卡的实现的更多相关文章

  1. Css中的Position属性

    Css中的Position属性 Css属性在线查询地址: http://www.css88.com/book/css/properties/index.htm CSS 中的 position 属性 在 ...

  2. css Tab选项卡

    css tab 选项卡据说有2中实现方式 1. target css3 2. 描点 2的 核心原理是利用描点显示问题(描点父级 overflow). <style> body,div,ul ...

  3. css中的浮动与三种清除浮动的方法

    说到浮动之前,先说一下CSS中margin属性的两种特殊现象 1, 外边距的合并现象: 如果两个div上下排序,给上面一个div设置margin-bottom,给下面一个div设置margin-top ...

  4. 对CSS中的Position、Float属性的一些深入探讨

    对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不 ...

  5. 总结一下CSS中的定位 Position 属性

    在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...

  6. 浅析CSS中的BFC和IFC

    1. 为什么会有BFC和IFC 首先要先了解两个概念:Box和formatting context: Box:CSS渲染的时候是以Box作为渲染的基本单位.Box的类型由元素的类型和display属性 ...

  7. CSS中一些常见的兼容性问题

    CSS中一些兼容性问题就是浏览器兼容,而这些浏览器兼容问题主要是Ie和FF之间的争斗. CSS hack中的一些事: 我们为了让页面形成统一的效果,要针对不同的浏览器或不同版本写出对应可解析的CSS样 ...

  8. CSS中清除浮动的两种方式

    在CSS中,父元素中的子元素如果使用了float,会导致父元素塌陷,高度为0. 对于这种情况,常见的解决方式有两种. 一.增加新的div,应用clear:both属性 html: <div cl ...

  9. CSS 中关于background 属性功能

    background 是 css中的核心属性,我们对他应该充分了解. background-image   定义背景图像  这个属性是我们用的最多的属性 设置背景图像有两个方式 background: ...

随机推荐

  1. djaogo 图片上传与读取

    1.首先上传图片表单需<form method="POST" enctype="multipart/form-data">2.视图py 中获取片名字 ...

  2. BZOJ3613 南园满地堆轻絮 二分/贪心

    正解:贪心 解题报告: 传送门! 这题似乎是可以二分水过的,,,但数据可以加强一下就能简单把二分卡住了,或者修改下空间限制什么的反正就很容易能卡住 所以这里介绍一个优秀的贪心做法,O(n)的时间复杂度 ...

  3. 洛谷P3245 大数 [HNOI2016] 莫队

    正解:莫队 解题报告: 传送门 这题首先要发现一个结论,是这样儿的: 若p不是10的约数(即2和5) 时,当第i位到第n位组成的数%p==第j位到第n位组成的数%p,那么第i位到第j位上的数组成的数% ...

  4. Linux内核如何装载和启动一个可执行程序（转）

    原文:http://www.cnblogs.com/petede/p/5351696.html 实验七:Linux内核如何装载和启动一个可执行程序 姓名:李冬辉 学号:20133201 注: 原创作品 ...

  5. 实践-通过matlab操作sqlite数据库

    1.下载sqlite-jdbc连接数据库地址 https://bitbucket.org/xerial/sqlite-jdbc/downloads/ 2.将该jar包的绝对路径写入matlab的cla ...

  6. nodejs 学习六 express 三种查询url参数方法

    req.param() 是被废弃的api req.params 俗点:取带冒号的参数 req.body 可以肯定的一点是req.body一定是post请求,express里依赖的中间件必须有bodyP ...

  7. sqlserver数据库查询，在数据类型不一致时容易出错

    1. 如此句sql: select SysNo from User_MainInfo where Ouid=@Ouid 在 User_MainInfo表中Ouid是nvarchar类型,但当我们传入的 ...

  8. $ sudo python -m pip install pylint 出错解决方法

    问题:在unbuntu执行$ sudo python -m pip install pylint出错解决方法支行以下命令sudo pip install pylint==1.9.3这样roboware ...

  9. what's the python之模块

    正则表达式 首先,我们引入了正则表达式的知识.所谓正则表达式,就是对字符串操作的一种逻辑公式,就是用事先定义好的一些特定字符.及这些特定字符的组合,组成一个“规则字符串”,这个“规则字符串”用来表达对 ...

  10. 算法面经之讯飞+CVTE

    一.科大讯飞(合肥) 概况:刚经历了科大讯飞的初面,大概35分钟左右,问的内容比较笼统,主要针对简历上的内容来,面试官比较亲切,回忆了一下面试内容. 建议:把简历上的内容整吧清楚,不知道的别瞎写,写了 ...